Tue, 2014-05-27 01:53
Hi everyone:
I am using the following to make it so that I have image hyperlinks that are initially translucent, but become solid when the cursor hovers above them, and become translucent again when the cursor leaves the image - please see code.
So I am getting the desired effect, but the problem is that the effect is being applied on all image hyperlinks in the webpage. I only want to apply this effect on some of the hyperlink images and not others - does anyone know how I can do that?
Thank you very much,
Jason
<!doctype html> <style> img { opacity:0.4; } img:hover { opacity:1.0; } </style> <a href="http://www.example1.com"> <img src="http://www.example.com/example1.jpg"> </a> <a href="http://www.example2.com"> <img src="http://www.example.com/example2.jpg"> </a> </ !doctype>
Tue, 2014-05-27 04:17
#1
Look at attribute selectors
Look at attribute selectors like http://csscreator.com/content/attribute-selector-ends
img[src$="1.jpg"] { opacity:0.4; } img[src$="1.jpg"]:hover { opacity:1.0; }
or use a class.
<!doctype html> <style> img.opacify { opacity:0.4; } img.opacify:hover { opacity:1.0; } </style> <a href="http://www.example1.com"> <img class="opacify" src="http://www.example.com/example1.jpg"> </a> <a href="http://www.example2.com"> <img src="http://www.example.com/example2.jpg"> </a>
Tue, 2014-05-27 05:09
#2
It worked! But something unexpected is happening
Thank you Tony, I used a class and I got the effect I was going for. However, when I hover over the image links a little horizontal line, 1 pixel wide and about 5 pixels across appears to the bottom right corner of the image. Please see www.jasonwangart.com for the effect (the css code was used for the side bar - social media links section). I observed the little line appearing using:
Chrome 35.0.1916.114
Safari 7.0.4 (9537.76.4)
Firefox 29.0.1
Below is an excerpt of the code I used. I put the code in a "HTML/JavaScript" "Gadget" in Blogger. Thank you very much!
Jason
<!doctype html> <style> .jwsidebartopbox { /*code*/ } .jwsidebartopbox:after { /*code*/ } .jwblank1 { /*code*/ } .jwsmlinksblock { /*code*/ } img.opacify { opacity:0.4; } img.opacify:hover { opacity:1.0; } </style> <div class="jwsidebartopbox"> <div class="jwblank1"> </div> <div class="jwsmlinksblock"> Jason Wang Art is on: <br/> <br/> <a href="http://www.facebook.com/jasonwangart"> <img class="opacify" src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" width="30" height="30" alt="facebook"/> </a> <a href="http://twitter.com/jasonwangart"> <img class="opacify" src="http://4.bp.blogspot.com/-u9n6ecjgLqY/U4N0-QazobI/AAAAAAAAAaI/9gQByamXxak/s1600/LOGO+twitter+60+c.png" width="30" height="" alt="youtube" /> </a> <a href="http://plus.google.com/u/0/+jasonwangart1"> <img class="opacify" src="http://4.bp.blogspot.com/-Jc2l5PWP1Uo/U4N09HsH-SI/AAAAAAAAAZ0/e3YcGarRcwQ/s1600/LOGO+google++64+c.png" width="30" alt="google+" /> </a> <br/> /*code*/ </div> </div> </!doctype>
Tue, 2014-05-27 22:08
#3
Hi jasonxweb, Try
Hi jasonxweb,
Try this:
.jwsmlinksblock a, .jwsmlinksblock a:hover{ text-decoration: none; }
Wed, 2014-05-28 18:08
#4
Thank you, it worked!
Thank you Tony!
For some reason, having
.jwsmlinksblock achanged the layout, but adding
.jwsmlinksblock a:hover { text-decoration: none; }
by itself worked.
Thanks again,
Jason