Image hover - Change effects

Question

I'd actually want to change an image when someone hovers the mouse over the image.

Lets say I have an image:

<img src="image.png"/>

I want to change it with the following effects on hover:

• The image should be clickable, so it should be a link which redirect users to another page
• The image's background should be black-ish, with opacity
• On the image it should appear an other image in the middle

How is it possible to do it?

Answer 1

I suggest that you create a link <a class="my-image">foo</a> and use css to get the rollover effect. CSS rollover tutorials are easy to find with a google search and this solution would be the most elegant, semantic and seo friendly you could achieve- without using javascript.

example code from http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 30px;
       width: 250px;
}

a:hover {
       background-position: 0 -30px;
}

Answer 2

you can make it like this:

<a class="superimage" href="http://yourlink.com"></a>

and the CSS:

.superimage {
    background-image: url(superimage.jpg) no-repeat 0 0;
    display: block; //or inline-block
    height: (image height)px;
    width: (image width)px;
    opacity: 0.8;
}

.superimage:hover {
    background-image: url(superimageonhover.jpg) no-repeat 0 0;
    display: block; //or inline-block
    height: (image height)px;
    width: (image width)px;
}

more help? just ask