Demo for Pure CSS Thumbnai Code with Image Zoom in

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


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

</head>
<body>
<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>

</body>
</html>

Other Codes

CSS Thumbnail with Text Zoom Effect on Hover

In this code, the thumbnail shows the title and buttons in the hover time. In addition, the image is displayed in the original color during the hover.

HTML Thumbnail with Hover Effect

In this code, the thumbnails have a radius border, and in hover mode the images become smaller and a border is displayed at the top and bottom, in this . . .

Circular Thumbnail Code with Caption on . . .

The thumbnails in this code have a circular appearance. Each image is covered in green at the time of Hover and a short title is written on it.

CSS Thumbnail 3D Rotation on Hover

In this beautiful thumbnail, there is normally only the shadow of the image. In hover mode, the image rotates at the same time as it becomes three-dimensional, . . .