Changing image on hover using css

Question

I am not a designer but today i am doing an experiment with css

My problem is i want to display an image on my webpage using css only like Here's a link

http://gsg.com.au/solutions/six-drivers-of-sustainable-growth-healthy-brands

Here is my sample code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
            "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Popups 2</title>
<style type="text/css">
<!--
body {position: relative; background: black; margin: 0; padding: 0;}

div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background:;
   border-right: 5px solid #505050;}
div#links #whl1 a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

div#links a img {height: 0; width: 0; border-width: 0;}
div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}

div#content {position: absolute; top: 26px; left: 161px; right: 25px;
   color: #BAA; background: #22232F; 
   font: 13px Verdana, sans-serif; padding: 10px; 
   border: solid 5px #444;}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}

h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right;background: #00ff00 url('wheel01.png') no-repeat fixed center;
; color: #667; letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height: 28px; vertical-align: middle; white-space: nowrap;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:visited {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:link:hover {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:visited:hover {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
code, pre {color: #EDC; font: 110% monospace;}
-->
</style>
</head>
<body>

<div id="links">
<a id ="whl1"><img src="wheel01.png" ></a>
<a id ="whl2"><img src="wheel02.png"></a>
<a id ="whl3"><img src="wheel03.png"></a>
<a id ="whl4" ><img src="wheel04.png"></a>
<a id ="whl5"><img src="wheel05.png"></a>
<a id ="whl6"><img src="wheel06.png"></a>
</div>

</div>


</body>
</html>

But it is not working for me please suggest me how they are doing with some example or ideas thanks

possible duplicate of How to change an image on mouse rollover (hover) — rene
– rene, Commented Aug 16, 2012 at 16:11

Kyle Macey · Accepted Answer · 2012-08-16 12:42:19Z

1

Use the hover pseudo-class.

#foo {
  background-image: url('not-hovered.png');
}

#foo:hover {
  background-image: url('hovered.png');
}

answered Aug 16, 2012 at 12:42

Kyle Macey

8,1543 gold badges40 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1481793 Over a year ago

Kyle please go through the link that i have mentioned i tried with hover and all but here it is not working for me

Chandrakant · Accepted Answer · 2012-08-16 12:49:31Z

0

<div id="links">
  <a id ="whl1"></a>
</div>

#links a{
  width:123px;
  height: 123px;
  background: url("your_normal_image.jpg") no-repeat; 
  display: block;}

#links wh11{
  width:123px;
  height: 123px;
  background: url("your_HOVER_image.jpg") no-repeat; }

Remove <img> from your HTML

Blasteralfred's ans is also R8 but in this case we cant change image, we can jst set opacity of current image

answered Aug 16, 2012 at 12:49

Chandrakant

1,9812 gold badges14 silver badges33 bronze badges

Comments

Cynthia · Accepted Answer · 2012-08-16 12:53:26Z

0

Here you go - a working example: http://jsfiddle.net/kKLKC/

The HTML (in a nutshell):

<p><a class="blue" href="http://www.icanhascheezburger.com"></a></p>

Note that the has been removed from the HTML markup.

The CSS:

a.blue { display:block ;
    width:151px ;
    height:180px ;
    background:url("http://www.digitaldemo.net/blue-bunny.png") no-repeat ;
}

a.blue:hover { background:url("http://www.digitaldemo.net/pink-bunny.png") no-repeat ;
}

You will need to do a CSS set (a.classname and a.classname:hover) for each link.

answered Aug 16, 2012 at 12:53

Cynthia

5,44313 gold badges49 silver badges71 bronze badges

2 Comments

user1481793 Over a year ago

actually i want the same thing as they are using here gsg.com.au/solutions/… What does your mean by it has been removed from the html markup if it is not der then how it is working on above link

Cynthia Over a year ago

because the images are specified in the CSS, not on the front-end HTML. The way you have it in your code, you are specifying an image on both the front AND the back end and the <img src=""> in your code covers up any background image specified in the CSS. That is why you don't get the hover effect.

Collectives™ on Stack Overflow

Changing image on hover using css

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related