CourtneyCarlton Posted May 31, 2022 Share Posted May 31, 2022 (edited) 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 May 31, 2022 by CourtneyCarlton Link to comment
derricksrandomviews Posted May 31, 2022 Share Posted May 31, 2022 (edited) 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 May 31, 2022 by derricksrandomviews Link to comment
CourtneyCarlton Posted June 3, 2022 Author Share Posted June 3, 2022 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
derricksrandomviews Posted June 3, 2022 Share Posted June 3, 2022 (edited) You could try creating a summary block in the unlinked section of your site, pull content from the blog, set up your layout and see if the summary code works. It works for me and you can see it here: https://myrandomviews.com/blog/lessons Edited June 3, 2022 by derricksrandomviews Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment