HTML
CSS<!DOCTYPE html>
<html>
<head>
<title>Galley With Hover</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<div class="container">
<br>
<div class="row">
<br>
<div class="col-md-4 col-sm-6">
<div class="fulldiv">
<img src="image1.jpg" width="100%" height="270px">
<div class="img_cr">
<div class="carousel-caption">
<p>FASTUNLOCK: FASTUNLOCK</p>
<p>FASTUNLOCK : FASTUNLOCK</p>
<p>FASTUNLOCK: FASTUNLOCK</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="fulldiv">
<img src="image2.jpg" width="100%" height="270px">
<div class="img_cr">
<div class="carousel-caption">
<p>FASTUNLOCK : FASTUNLOCK</p>
<p>FASTUNLOCK : FASTUNLOCK</p>
<p>FASTUNLOCK: FASTUNLOCK</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="fulldiv">
<img src="image3.jpg" width="100%" height="270px">
<div class="img_cr">
<div class="carousel-caption">
<p>FASTUNLOCK: FASTUNLOCK</p>
<p>FASTUNLOCK: FASTUNLOCK</p>
<p>FASTUNLOCK: FASTUNLOCK</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="fulldiv">
<img src="image4.jpg" width="100%" height="270px">
<div class="img_cr">
<div class="carousel-caption">
<p>FASTUNLOCK: FASTUNLOCK</p>
<p>FASTUNLOCK: FASTUNLOCK</p>
<p>FASTUNLOCK: FASTUNLOCK</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="fulldiv">
<img src="image5.jpg" width="100%" height="270px">
<div class="img_cr">
<div class="carousel-caption">
<p>FASTUNLOCK: FASTUNLOCK</p>
<p>FASTUNLOCK: FASTUNLOCK</p>
<p>FASTUNLOCK: FASTUNLOCK</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="fulldiv">
<img src="image6.jpg" width="100%" height="270px">
<div class="img_cr">
<div class="carousel-caption">
<p>FASTUNLOCK: FASTUNLOCKER</p>
<p>FASTUNLOCK: FASTUNLOCKER</p>
<p>FASTUNLOCK: FASTUNLOCKER</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.carousel-caption{
font-family: monospace;
font-size: 17px;
font-weight: bold;
margin-bottom: 45px;
opacity: 0;
transition: 0.3s ease-in-out;
cursor: pointer;
}
img{
transition: 0.3s;
opacity: 1;
cursor: pointer;
padding-bottom: 18px;
filter: grayscale(0);
transition: 0.3s ease-in-out;
}
.fulldiv{
transition: 0.5s ease-in-out;
}
.col-md-4 .fulldiv:hover{
display: block;
opacity: 0.9;
border-radius: 5px;
filter: grayscale(100%);
transform: scale(1.04);
transform: translateY(-10px);
box-shadow: 2px 4px 18px #666666;
}
.col-md-4:hover .carousel-caption{
opacity: 1;
}
