bcrealty Posted April 5, 2017 Share Posted April 5, 2017 (edited) I have used the following CSS to add a rollover effect on any image with a link, although it does not work when an image is changed to a poster. Does anyone know the fix for this? Any help would be greatly appreciated! a:link img { opacity: 1.0; filter: alpha(opacity=100); } a:hover img { opacity: 0.8; filter: alpha(opacity=80); } example: www.reverogroup.com/test Edited April 9, 2017 by bcrealty code fix sage_mcelroy and hollyavenue 2 Link to comment
4 tkn191 Posted May 30, 2017 Share Posted May 30, 2017 Try this one. It worked on my image poster blocks: .image-block:before { content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0; opacity: .5; background:; } .image-block:hover:before { background: white; opacity: .3; transition: all .3s ease-in-out; } Link to comment
2 MatusKoprda Posted February 19, 2019 Share Posted February 19, 2019 Hello @HouseofDB Thanks for your code. It worked great but now I realized that my image is not clickable. Hover work just fine, but the main purpose of image (link) is not working. Can you help me with that? Link to comment
1 hollyavenue Posted April 11, 2017 Share Posted April 11, 2017 I had the same question. Following. Link to comment
1 houseofdb Posted July 12, 2018 Share Posted July 12, 2018 There was one issue with this code in that it applied to all image blocks, including those that didn't have a link to anything. Below is an update to this code with an extra little bit to help make sure this only applies to images with a linked URL... .image-block .image-linked:before { content: "";width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0; opacity: .6;background:; } .image-block .image-linked:hover:before {background: black;opacity: .6;transition: all .5s ease-in-out; } Hope it helps. artpimpress 1 Link to comment
0 hollyavenue Posted April 11, 2017 Share Posted April 11, 2017 I had the same question. Following. Link to comment
0 sage_mcelroy Posted May 5, 2017 Share Posted May 5, 2017 I also have the same question. Link to comment
0 bcrealty Posted June 1, 2017 Author Share Posted June 1, 2017 Thank you so much, that works perfectly! Link to comment
0 am_bryan Posted December 4, 2017 Share Posted December 4, 2017 Thanks for sharing this! Is there a way to have this effect only apply to images that contain links? Link to comment
0 Melanite Posted February 9, 2018 Share Posted February 9, 2018 Thank you this is great~How would you all the text to do the same? Poster images don't have hover effects built into squarespace x.x Link to comment
0 madalp Posted May 9, 2018 Share Posted May 9, 2018 Hey, thanks for sharing, it works for the hover effect although the thumbnail link doesn't work anymore, I think the hover might be overriding it.. do you know how to fix it? Link to comment
0 slambertdesign Posted July 11, 2019 Share Posted July 11, 2019 I am having the same issue as @matuskoprda. I am getting the effect to work nicely however the image (link) is no longer clickable. Has anyone figured out a solution to this? Link to comment
-1 sage_mcelroy Posted May 5, 2017 Share Posted May 5, 2017 I also have the same question. Link to comment
Question
bcrealty
I have used the following CSS to add a rollover effect on any image with a link, although it does not work when an image is changed to a poster. Does anyone know the fix for this? Any help would be greatly appreciated!
example: www.reverogroup.com/test
Edited by bcrealtycode fix
Link to comment
Top Posters For This Question
2
2
2
1
Popular Days
Apr 11
2
May 5
2
Jun 1
1
Feb 19
1
Top Posters For This Question
hollyavenue 2 posts
sage_mcelroy 2 posts
bcrealty 2 posts
tkn191 1 post
Popular Days
Apr 11 2017
2 posts
May 5 2017
2 posts
Jun 1 2017
1 post
Feb 19 2019
1 post
Popular Posts
houseofdb
There was one issue with this code in that it applied to all image blocks, including those that didn't have a link to anything. Below is an update to this code with an extra little bit to help make s
12 answers to this question
Recommended Posts