Image Gallery CSS

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;
}

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;

}

Try it

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”):

<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>

<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>

</body>

</html>

Try it

Image Gallery CSS

Image Sprites CSS

Related Posts: