4 replies [Last post]
jasonxweb
jasonxweb's picture
Offline
newbie
Last seen: 2 years 49 weeks ago
Timezone: GMT-8
Joined: 2014-05-27
Posts: 8
Points: 15

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>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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>

jasonxweb
jasonxweb's picture
Offline
newbie
Last seen: 2 years 49 weeks ago
Timezone: GMT-8
Joined: 2014-05-27
Posts: 8
Points: 15

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>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi jasonxweb, Try

Hi jasonxweb,
Try this:

.jwsmlinksblock a, .jwsmlinksblock a:hover{
    text-decoration: none;
}

jasonxweb
jasonxweb's picture
Offline
newbie
Last seen: 2 years 49 weeks ago
Timezone: GMT-8
Joined: 2014-05-27
Posts: 8
Points: 15

Thank you, it worked!

Thank you Tony!

For some reason, having

.jwsmlinksblock a

changed the layout, but adding

 
			.jwsmlinksblock a:hover
			{
			    text-decoration: none;
			}

by itself worked.

Thanks again,

Jason