Archived topic
Using Lightweight Grid Columns in sections - hover effect on images?
8 replies · Started by Deborah on August 9, 2018
I've searched the forum, found several topics from last year, but wondered if anything has changed regarding hover on images.
Using Sections > Lightweight Grid Columns, I added four images which are linked to other pages on the site.
Is it possible to have a dark overlay display when the image is hovered over? I know I can use the CSS opacity property for a transparent white overlay, but client is looking for a dark overlay on images when they are hovered over.
Definitely possible with some CSS, but only if the images have a container around them.
Can you link me to your site?
Hi Tom,
Apologies, I thought I had sent response earlier.
Link to site: https://deosites.com/ - scroll to bottom of home page.
I currently have a white transparent overlay, but want to have dark overlay. Based on your response, I would need to add a div around each of the img elements? Is that correct?
Yea, if you could wrap each image in a container, we should be able to achieve it:
<div class="hover-image-container">
<img src="..." />
</div>Then do this CSS:
.image-hover-container {
position: relative;
}
.image-hover-container img {
width: 100%;
vertical-align: middle;
}
.image-hover-container:after {
content: "hi";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
opacity: 0;
transition: opacity 500ms ease;
}
.image-hover-container:hover:after {
opacity: 1;
}Thank you, Tom.
That does give the black transparent overlay effect I want for the thumbnail images. But it loses the hover pointer over the image and the link to the different page. You can see the change in the "Accommodations" image, the first image of the four thumbnail images.
If you hover/tab to any of the other thumbnails, that don't have the div container surrounding the image, they maintain the ability to link to another page. But sadly don't display the black overlay.
Suggestions?
Found another solution that works by adding a class to the image and styling hover combining functions of the CSS filter property.
.thumb-image {
filter: sepia(100%) hue-rotate(120deg) brightness(40%) saturate(20%);
transition: all .5s ease;
}
The link is maintained and the black overlay covers the image.
Came up with another option: combine brightness and grayscale filters, reducing the number of combinations.
filter: brightness(0.4) grayscale(80%);
Very cool! Thanks for sharing that with me :)
My pleasure, Tom! Hopefully other GeneratePress users will find it useful.
