By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

Custom hover overlay on Gallery thumbnails

MT24

New Member
Likes
0
#1
Hi there, I'm converting a Divi site to GP with Elementor, and trying to replicate something similar to the existing overlay with icon when hovering on images. I have managed to achieve this on single image widgets via a combination of custom css, plus using Style > Hover > Opacity 0.3 in the widget. Examples of the result here:
mt24.uk/gta/sketchbooks
Here's the css used in the Child theme:
/* ----- IMAGE OVERLAY ON HOVER */
.elementor-image {
position: relative;
width: 100%;
}
/* Original image */
.elementor-image a {
display: block;
width: 100%;
height: auto;
}
/* Icon overlay */
.elementor-image a:before {
content: "\f055";
font-family: 'FontAwesome';
font-size: 30px;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
color: #0067cf;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 100%;
}
.elementor-image a:hover:before {
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Now I'm trying to get the same effect on gallery images (mt24.uk/gta/photo-gallery) - where I can get the icon to work using the equivalent code above, but I don't know how to add the opacity overlay, because it's not available in the widget.

/* Gallery images */
.gallery-icon {
position: relative;
width: 100%;
}
/* Gallery Original image */
.gallery-icon a {
display: block;
width: 100%;
height: auto;
}
/* Gallery Icon overlay */
.gallery-icon a:before {
content: "\f055";
font-family: 'FontAwesome';
font-size: 30px;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
color: #0067cf;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 100%;
}
/* Gallery overlay */
.gallery-icon a:hover:before {
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Any suggestions as to how I need to alter the code?
Thanks in advance
 
elementor official
elementor official