Top Left Text cha

Website Development Services

For an example, I'll use an Instagram link. When not hovering over the image, it should look like this black and white image:



Then when you hover over it, it should look like this color image:



You can also use CSS to do other things like make it rotate, get bigger, move in some direction, etc.  But in this example, I'll just make it replace the image with a different image.  The best way to do this is to put both images into one single image.  I'll put the black and white one on top, the color one on the bottom, then use CSS to call the correct area of the image.  This way both images are loaded at the same time and there is no hesitation while your browser loads a second image (when you hover over it).

So I'm going to use Photoshop to make those two images one...



The CSS & HTML:
<style>
#exampleHover>a {
    display:block;
    width:100px;
    height:100px;
    background:url('/images/ig2.png') no-repeat top center;
}
#exampleHover>a:hover {
    background:url('/images/ig2.png') no-repeat bottom center;
}
</style>

<div id="exampleHover">
<a href="http://instagram.com"></a>
</div>

 The outcome:

Comment (0) Hits: 787
X