Image Gallery CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
div.gallery { margin: 5px; border: 5px solid red; float: left; width: 180px; } div.gallery:hover { border: 5px solid purple; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } |
Image Sprites CSS
We can show the part of the image we need by using image sprites.
Instead of using three separate images, here we are using the single image (“logo.jpg”):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<html> <head> <style> #navlist { position: relative; } #navlist li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; } #navlist li, #navlist a { height: 200px; display: block; } #home { left: 0px; width: 300px; background: url('logo.jpg') 0 0; } #home a:hover { background: url('logo.jpg') 0 -45px; } </style> </head> <body> <ul id="navlist"> <li id="home"><a href="https://t4tutorials.com/"></a></li> </ul> </body> </html> |