Using effects during the hover will make your website more interactive and users will feel more satisfied when searching and reading your website. In this code, the thumbnails have the effect of zooming and deforming the border at hover time. When the mouse cursor is placed on each of the thumbnails, the image becomes slightly larger and the frame is square.
HTML
<!-- This script got from www.devanswer.com -->
<header>
<h1>Gallery</h1>
</header>
<div class="seccion">
<div class="galeria">
<ul>
<li><img src="https://picsum.photos/id/227/200/300"></li>
<li><img src="https://picsum.photos/id/235/200/300"></li>
<li><img src="https://picsum.photos/id/234/200/300"></li>
<li><img src="https://picsum.photos/id/233/200/300"></li>
<li><img src="https://picsum.photos/id/232/200/300"></li>
<li><img src="https://picsum.photos/id/231/200/300"></li>
<li><img src="https://picsum.photos/id/230/200/300"></li>
<li><img src="https://picsum.photos/id/229/200/300"></li>
<li><img src="https://picsum.photos/id/228/200/300"></li>
</ul>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
h1{
text-align: center;
text-transform: uppercase;
}
.seccion {
width: 60%;
margin-left: 20%;
}
.galeria {
margin-top: 40px;
margin-bottom: 40px;
}
.galeria ul li, .galeria li img {
-webkit-transition: all 1s cubic-bezier(.42,.2,.2,.64);
-moz-transition: all 1s cubic-bezier(.42,.2,.2,.64);
-o-transition: all 1s cubic-bezier(.42,.2,.2,.64);
transition: all 1s cubic-bezier(..42,.2,.2,.64);
}
.galeria ul li {
position: relative;
float: left;
width: 140px;
height: 140px;
margin: 5px;
padding: 5px;
list-style-type: none;
}
.galeria ul li:hover {
z-index: 99;
}
.galeria ul li img {
position: absolute;
left: 0;
top: 0;
border: 1px solid #999999;
padding: 5px;
width: 140px;
height: 140px;
background: #abc4d6;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
border-radius: 75px;
}
.galeria ul li img:hover {
width: 280px;
height: 280px;
margin-top: -150px;
margin-left: -150px;
top: 50%;
left: 50%;
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
border-radius: 40px;
}
#copyright {
margin-top: 40px;
margin-right: 20%;
width: 60%;
text-align: right;
float: right;
}
