Client Login

Dev & Tech Notes

San Diego | Los Angeles | Big Bear | USA
Terms & Conditions     ©2005-2024 TJohns.co

Articles in this Category

Top Left Text cha

Web & App Development

Details
Category: CSS
Hits: 2238
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:

Add new comment
Comment (0) Hits: 2238

Dev Notes

X