Jump to content

How do I apply an image hover effect to a blog post gallery image?

Recommended Posts

Site URL: https://www.mfcreativedesigns.com/wedding-portfolio

I am trying to figure out how to apply an image hover effect to our blog post gallery images. On our website URL above -- https://www.mfcreativedesigns.com/wedding-portfolio -- you can see a page full of images that are actually blog posts full of expanded galleries. Nothing indicates that these blog post images are clickable/expandable, other than the written note at the top of the page. I would like to apply a hover effect that indicates they can be clicked on to see more. Either a fade, or for the title to appear when hovered over... anything that will give it the clickable effect. Can someone please help? Thank you so, so, so much in advance. So grateful for this community!

Edited by CourtneyCarlton
Link to comment
  • Replies 3
  • Views 896
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Here is some code that should help. If you are using summary blocks you only need paste the last snippet into your custom css. But all three are on my site:

.img.thumb-image:hover {
         opacity: 0.6;
           filter:alpha(opacity=60);  //For IE8 and earlier 
     } 
         
  .image-slide-anchor:hover {
         opacity: 0.6;
filter:alpha(opacity=60);  //For IE8 and earlier 
     } 

img.summary-thumbnail-image.loaded:hover {
 opacity: 0.5;
 }

Edited by derricksrandomviews
Link to comment
On 5/31/2022 at 5:35 PM, derricksrandomviews said:

Here is some code that should help. If you are using summary blocks you only need paste the last snippet into your custom css. But all three are on my site:

.img.thumb-image:hover {
         opacity: 0.6;
           filter:alpha(opacity=60);  //For IE8 and earlier 
     } 
         
  .image-slide-anchor:hover {
         opacity: 0.6;
filter:alpha(opacity=60);  //For IE8 and earlier 
     } 

img.summary-thumbnail-image.loaded:hover {
 opacity: 0.5;
 }

Thank you for your help! I haven't been able to figure this out yet, but wanted to thank you for your response. I really appreciate it!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.