Image Change with Mouse Hover

Question

I have some links to my facebook and twitter, these links are images. I want these links to turn lighter when I hover over them. I was thinking I could do this by making two images and making the images change when I hover over the image link. Is this the best way to do it and if it is how do i do it? I couldn't find any help on how to do it this way.

Here is my HTML:

<div class="social">

 <a href="https://www.facebook.com/seth.urquhart?sk=wall&v=wall">
  <img src="../img/facebook_logo_extended.jpg"/>
 </a>

</div>

<br>

<div class="social">

 <a href="https://twitter.com/SethUrquhart">
  <img src="../img/twitter_logo_extended.jpg"/>
 </a>

</div>

Here is my CSS:

p {
color: #232323;
text-indent:0px;
margin-left:30px;
padding-right: 30px;
}

ul  {
text-align: center;
color: gray;
}

ul a {
text-decoration: none;
color: black;
}

ul a:hover {
text-decoration: underline;
    margin-right: auto;
margin-left: auto;
}

html {
background: #e8e9e1;
}

h1 {
text-align: center;
}

body {
font-family: sans-serif;
color: #232323;
}

.wrap {
min-width: 600px;
width: 1200px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}

.content {
background: #ffffff;
width: 900px;
margin-left: auto; 
margin-right:auto; 
height: auto;
text-indent: 50px;
}

.footer {
text-align: center;
background-color: #383838;
width: 900px;
margin-left: auto;
margin-right: auto;
color: #e8e9e1;
}

.social {
width: 900px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}

.social:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}

ul#list-nav {
padding: 0;
list-style: none;
width: 605px; 
margin: 0 auto;
}

ul#list-nav li {
display:inline;
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}

ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}

Answer 1

Assuming you're willing to use CSS3, I created an example showing one way to get a brief widening effect for the icons (I suppose that is what "dense" means in the question). Reduced code here:

.icon {
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

.icon:hover {
  position: relative;
  z-index: 1;
  transform: scale(1.7);
  -ms-transform: scale(1.7); /* IE 9 */
  -webkit-transform: scale(1.7); /* Safari and Chrome */
}

The transform property has good support. The effect with transition isn't so well supported (no IE9 support), but if you are thinking on graceful degration, I think it's quite valid to use that.

EDIT

I'm updating this answer because it could help other people in future. The accepted answer isn't the right approach , since it's using obtrusive JavaScript to do things about styling, where CSS is the right tool. I really hope the OP will take a look here and change their code.

Based on the OP's feedback, I updated the example showing how to get a brightness effect simulated by changing the opacity property with a fallback using filter for IE6-8. In short, here's the code:

.icon {
  opacity: 1;
  filter: Alpha(Opacity=100);
}

.icon:hover {
  opacity: .6;
  filter: Alpha(Opacity=60);
}

It's easy and works very well when the parent's background-color is lighter than the element. If you need something more elaborated (if you really want changing between two images), I really suggests you to use CSS sprites .

Answer 2

I don't know what you mean by dense, but you can alter any image property via the onmouseover and restore it with onmouseout. Here's a code snippet to show how to do it. This code simply makes an image dimmer when the mouse is over it, then restores it when the mouse leaves:

<img 
    src = "test.jpg" 
    style = "width:50%;" 
    id = "test" 
    onmouseover = "document.getElementById('test').style.opacity=0.5"
    onmouseout = "document.getElementById('test').style.opacity=1" />

If you wanted to make the images bigger on the hover, you'd change any of the size attributes. For instance, here's a particularly dramatic size jump:

<img 
    src = "test.jpg" 
    style = "width:50%;" 
    id = "test" 
    onmouseover = "document.getElementById('test').style.width='75%'"
    onmouseout = "document.getElementById('test').style.width='50%'" />

Please note that the above is for illustrative purposes only. There are other ways of doing this, and I am not saying the way I presented is the best or even a good one. However, it's clear and I just want you to clearly see how this can be done.

Answer 3

The simpliest solution would probably for you to use background-images rather than images so you can just switch between them. You can even go as far as creating 3 states this way.. inactive, hover, and selected..

Consider cascades and specificity.. If you define your inactive state first, hover state is defined second overwriting the same definitions, selected state is defined last, again with the same definitions and level of specificity. Now each will overwrite the other in the appropriate or they will happen.

An image

div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }

On hover display a different image

div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }

If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class

div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }