Photo gallery image hover effects with pure CSS and these cards are created by using Bootstrap 4. The image hover animation will be more attractive to the users because with it your website gallery page UI (User Interface) will look good.
HTML
<!-- Photo Gallery -->
<section id="photo-gallery">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title">
<h2 class="text-center">Photo Gallery</h2>
<p class="col-md-8 offset-md-2 text-center mb-5"><i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</i></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="photo-frame">
<div class="state-thumb">
<img src="images/image-one.jpg" class="img-fluid">
</div>
<h4><a href="#">Perth</a></h4>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="photo-frame">
<div class="state-thumb">
<img src="images/image-two.jpg" class="img-fluid">
</div>
<h4><a href="#">Melbourne</a></h4>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="photo-frame">
<div class="state-thumb">
<img src="images/image-three.jpg" class="img-fluid">
</div>
<h4><a href="#">Sydney</a></h4>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="photo-frame">
<div class="state-thumb">
<img src="images/image-four.jpg" class="img-fluid">
</div>
<h4><a href="#">Tasmania</a></h4>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="photo-frame">
<div class="state-thumb">
<img src="images/image-five.jpg" class="img-fluid">
</div>
<h4><a href="#">Brisbane</a></h4>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="photo-frame">
<div class="state-thumb">
<img src="images/image-six.jpg" class="img-fluid">
</div>
<h4><a href="#">Adelaide</a></h4>
</div>
</div>
</div>
</div>
</section>
<!-- End Photo Gallery -->CSS
/*-- Photo Gallery CSS --*/
#photo-gallery {
padding: 40px 0px 40px;
}
#photo-gallery .state-thumb {
max-height: 170px;
overflow: hidden;
border-radius: 10px;
}
#photo-gallery .state-thumb img {
width: 100%;
transition: 0.5s;
}
#photo-gallery .photo-frame:hover img{
transform: scale(1.3, 1.3);
}
#photo-gallery h4 {
margin: 10px 0px 0px;
text-align: right;
}
#photo-gallery h4 a {
color: #9c27b0;
font-size: 20px;
}
#photo-gallery .photo-frame {
border: 1px solid #cecece;
padding: 15px;
margin-bottom: 30px;
border-radius: 10px;
transition: 0.3s;
background-color: #fff;
}
#photo-gallery .photo-frame:hover {
box-shadow: 0px 0px 15px 0px #d0d0d0;
border-color: #9c27b0;
}
/*-- End Photo Gallery CSS --*/