Change height on hover

[franticape]

Hi there, i’m looking to achieve this effect without adding custom CSS (i know how to do it with CSS, not so much with cornerstone’s effects alone): https://prnt.sc/l93Vg2FmVXun

So, at first i thought of adding 2 divs, one with the image and one with the rest of teh container (role, social media, content, etc).

Then i’d set a max height to shorten the height. so far so good. i’d then add a translate effect on the Y axis. cool, that works too bu then i don’t know where i could handle the new height.

If this is not the way to go, can you let me know another approach with only cornerstone? i’m trying to avoid custom code unless 100% necessary so the client can have more flexibility later on.

[ruenel]

Hello @franticape,

Thanks for writing in! You cannot use translate because that only adjusts the Y-axis but not the height of the element. You will need custom CSS to be able to achieve what you have in mind.

Best Regards.

[franticape]

Ok, so you can confirm there is no “native” way to change heights and stuff as you would in CSS, right?

If so, could i request this as a feature for the future?

In the meantime, for the people that might not be well versed in CSS, a way to do this directly in the element is to go to “customize” and in the CSS of that element add:

$el:hover{
   height:auto;
}

This could also be done on a global or page CSS where instead of $el, one could add a class to the element and then add the class in the code (there are many ways to go about it.

[prakash_s]

Hello @franticape,

Yes, there are no options for that you need to use custom CSS code. Thank you for sharing the information and custom CSS code, it would be helpful for other customers as well.

Thanks