Thread Starter
thaqua
(@thaqua)
Hello elementor people,
I have a question about getting an hover animation for my immage. I would like to turn my image grey just like the images on this website http://www.samasamasilver.com/c-3446145/armbanden/. I have seen the animations at the style tab but this is not one of them. I tried to get it done with the css classes at the advanced tab but i am clearly not advanced enough because nothing worked I got from the internet.
Is there anyone that can help my with this issue?
Thanks in advance
Kind regards,
Pieter
Edit: bad internet connection
Hi @thaqua,
At the moment it isn’t possible.
We will consider to include this in future versions.
You can do this with simple css but the example you provided is more than just an image. It’s also a text element that is hidden but later becomes revealed when you hover the image.
This can be achieved in Elementor using a little extra finesse. An example would be adding a caption to the image and giving it a class such as .shady:
.shady figure {
position: relative;
}
.shady figcaption:before {
content: ' ';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.shady figcaption {
background: rgba(0, 0, 0, 0.45);
opacity: 0;
padding: 1% 0;
position: absolute;
transition: opacity 200ms;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.shady figcaption:hover {
opacity: 1;
}
Thread Starter
thaqua
(@thaqua)
Thanks for your response both! I am going to try it out now.
Pretty basic but how do i give a class to the caption?
In my example above, I gave the image element a class of shady which allows me to target all of the child elements as well.
