Dev & Tech Notes
San Diego | Los Angeles | Big Bear | USA
Terms & Conditions ©2005-2024 TJohns.co
Terms & Conditions ©2005-2024 TJohns.co
Articles in this Category
Top Left Text cha
Web & App Development
- Details
- Written by Timothy Johns
- Category: CSS
- Hits: 2241
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: 2241