CODEWITHSUNDEEP
htmlcss
user1481793
user1481793

Reputation: 553

Changing image on hover using css

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

Upvotes: 1

Views: 7839

Answers (3)

Cynthia
Cynthia

Reputation: 5403

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.

Upvotes: 0

Chandrakant
Chandrakant

Reputation: 1981

<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

Upvotes: 0

Kyle Macey
Kyle Macey

Reputation: 8154

Use the hover pseudo-class.

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

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

Upvotes: 1

Related Questions