NiceSnippets.com
Image gallary with multiple overlay or hover effect
In this snippet we are create image gallary with different hover effect. this is beautiful and professional image hover effect. on image overlay we set different type of action icon. when you hover on image at that time transparent black color come.
Here many types of image overlay like you see serach icon on image overlay and on one another image there is three icon edit,delete and search. and in some other image we write some text with effect.
<!doctype html>
<html lang="en">
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div class="container">
<div class="row mt-5 mb-2">
<div class="overlay-one mb-3 col-md-3 col-sm-6 col-12">
<div class="content">
<a href="demo/image1.jpeg">
<div class="content-overlay rounded"></div>
<img class="img-thumbnail w-100" src="//nicesnippets.com/demo/image1.jpeg">
<div class="content-details fadeIn-bottom text-white w-50 text-center pl-2 pr-2">
<i class="fa fa-search"></i>
</div>
</a>
</div>
</div>
<div class="overlay-two mb-3 col-md-3 col-sm-6 col-12">
<div class="content">
<a href="demo/image2.jpeg">
<div class="content-overlay rounded-left"></div>
<img class="img-thumbnail w-100" src="//nicesnippets.com/demo/image2.jpeg">
<div class="content-details fadeIn-left text-white w-50 h-100 text-center pl-3 pr-3">
<i class="fa fa-pencil mb-3 w-100"></i>
<i class="fa fa-search mb-3 w-100"></i>
<i class="fa fa-trash mb-3"></i>
</div>
</a>
</div>
</div>
<div class="overlay-three mb-3 col-md-3 col-sm-6 col-12">
<div class="content">
<a href="demo/image3.jpeg">
<div class="content-overlay rounded-right"></div>
<img class="img-thumbnail w-100" src="//nicesnippets.com/demo/image3.jpeg">
<div class="content-details fadeIn-right text-white w-50 h-100 text-center pl-3 pr-3">
<i class="fa fa-pencil mb-3 w-100"></i>
<i class="fa fa-search mb-3 w-100"></i>
<i class="fa fa-trash mb-3"></i>
</div>
</a>
</div>
</div>
<div class="overlay-four mb-3 col-md-3 col-sm-6 col-12">
<div class="content">
<a href="demo/image4.jpeg">
<div class="content-overlay rounded"></div>
<img class="img-thumbnail w-100" src="//nicesnippets.com/demo/image4.jpeg">
<div class="content-details fadeIn-top text-white w-50 text-center pl-2 pr-2">
<i class="fa fa-search"></i>
</div>
</a>
</div>
</div>
</div>
<div class="row">
<div class="overlay-five mb-3 col-md-3 col-sm-6 col-12">
<div class="content">
<a href="demo/image5.jpeg">
<div class="content-overlay text-center bg-white">
<img class="img-thumbnail" src="//nicesnippets.com/demo/image5.jpeg" />
<div class="content-details text-dark">
<i class="fa fa-search"></i>
</div>
</div>
</a>
</div>
</div>
<div class="overlay-six mb-3 col-md-3 col-sm-6 col-12">
<div class="content">
<a href="demo/image6.jpeg">
<div class="content-overlay text-center bg-white">
<img class="img-thumbnail" src="//nicesnippets.com/demo/image6.jpeg" />
<div class="content-details">
<h2>JASON MICHAEL</h2>
</div>
</div>
</a>
</div>
</div>
<div class="overlay-seven mb-3 col-md-3 col-sm-6 col-12">
<div class="content">
<a href="demo/image7.jpeg">
<div class="content-overlay text-center bg-white">
<img class="img-thumbnail" src="//nicesnippets.com/demo/image7.jpeg" />
<div class="content-details text-white">
<h2>I DON'T KNOW WHICH IS WORSE</h2>
</div>
</div>
</a>
</div>
</div>
<div class="overlay-eight mb-3 col-md-3 col-sm-6 col-12">
<div class="content">
<a href="demo/image8.jpeg">
<div class="content-overlay text-center bg-white">
<img class="img-thumbnail" src="//nicesnippets.com/demo/image8.jpeg" />
<div class="content-details text-white">
<i class="fa fa-search"></i>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
.content{
position: relative;
}
.content .content-overlay{
background: rgba(0,0,0,0.7);
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.content:hover .content-overlay{
opacity: 1;
}
.overlay-two .content .content-overlay, .overlay-three .content .content-overlay{
width: 33.33%;
}
.overlay-three .content .content-overlay {
left: unset;
}
.content-details {
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.content:hover .content-details{
top: 50%;
left: 50%;
opacity: 0.5;
}
.overlay-two .content-details i, .overlay-three .content-details i{
font-size: 27px;
}
.overlay-two .content-details .fa-pencil, .overlay-three .content-details .fa-pencil{
margin-top: 70%;
}
.overlay-two .content:hover .content-details{
left: 17%;
}
.overlay-three .content:hover .content-details{
left: 83%;
}
.content-details i{
font-size: 2.25em;
}
.fadeIn-top{
top: 20%;
}
.fadeIn-bottom{
top: 80%;
}
.fadeIn-left{
left: 0%;
}
.fadeIn-right{
left: 100%;
}
.overlay-five .content .content-overlay{
position: relative;
-webkit-perspective: 50em;
perspective: 50em;
opacity: 1;
}
.overlay-five .content .content-overlay .content-details {
top: 50%;
position: absolute !important;
opacity: 0;
z-index: 1;
}
.overlay-five .content .content-overlay:after {
background-color: #ffffff;
position: absolute;
content: "";
display: block;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0;
}
.overlay-five .content .content-overlay:hover .content-details,.content-overlay.hover .content-details {
opacity: 1;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.overlay-five .content .content-overlay:hover:after,.content-overlay.hover:after {
-webkit-transform: rotateX(0);
transform: rotateX(0);
opacity: 0.9;
}
.overlay-six .content-overlay {
position: relative;
overflow: hidden;
opacity: 1;
}
.overlay-six .content-overlay:after {
background: #ffffff;
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
content: '';
opacity: 0.75;
-webkit-transform: skew(-45deg) scaleX(0);
transform: skew(-45deg) scaleX(0);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.overlay-six .content-overlay .content-details {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
.overlay-six .content-overlay h2{
opacity: 0;
padding: 0 30px;
display: inline-block;
color: black !important;
}
.overlay-six .content-overlay:hover:after,.overlay-six .content-overlay.hover:after {
-webkit-transform: skew(-45deg) scaleX(1);
transform: skew(-45deg) scaleX(1);
transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.overlay-six .content-overlay:hover .overlay-six .content-overlay .content-details h2,.overlay-six .content-overlay.hover .content-details h2{
-webkit-transform: translate3d(0%, 0%, 0);
transform: translate3d(0%, 0%, 0);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.overlay-six .content-overlay:hover .content-details h2{
opacity: 1;
}
.overlay-seven .content-overlay {
position: relative;
overflow: hidden;
opacity: 1;
}
.overlay-seven .content-overlay .content-details {
position: absolute;
padding: 2.5em 3em;
opacity: 1;
}
.overlay-seven .content-overlay .content-details::before {
position: absolute;
top: 50%;
right: 30px;
bottom: 50%;
left: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
content: '';
opacity: 0;
background-color: #ffffff;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.overlay-seven .content-overlay .content-details h2{
margin: 0 0 5px;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
-webkit-transform: translate3d(0%, 50%, 0);
transform: translate3d(0%, 50%, 0);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.overlay-seven .content-overlay:hover img {
opacity: 0.9;
}
.overlay-seven .content-overlay:hover .content-details h2 {
opacity: 1;
-webkit-transform: translate3d(0%, 0%, 0);
transform: translate3d(0%, 0%, 0);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.overlay-seven .content-overlay:hover .content-details::before {
background: rgba(255, 255, 255, 0);
top: 30px;
bottom: 30px;
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.overlay-eight .content-overlay {
overflow: hidden;
position: relative;
opacity: 1;
}
.overlay-eight .content-overlay .content-details {
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
border-bottom: 1px solid #FFF;
border-top: 1px solid #FFF;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0,1);
-ms-transform: scale(0,1);
transform: scale(0,1);
}
.overlay-eight .content-overlay .content-details .fa-search{
margin-top: 40%;
font-size: 2.25em;
opacity: 0.5;
}
.overlay-eight .content-overlay:hover .content-details {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.overlay-eight .content-overlay img {
display: block;
position: relative;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.overlay-eight .content-overlay:hover img {
filter: brightness(0.6);
-webkit-filter: brightness(0.6);
}
