"Gallery + portfolio + card + hover + ravi"
Bootstrap 4.1.1 Snippet by Balaz98

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="container"> <div class="grid"> <div class="row"> <div class="col-md-4"> <figure class="effect-ravi"> <img src="https://picsum.photos/1000/800/?random" alt="img17" /> <figcaption> <h2>Birthday <span>Party</span></h2> <p> <a href="#"><i class="fa fa-search"></i></a> </p> </figcaption> </figure> </div> <div class="col-md-4"> <figure class="effect-ravi"> <img src="https://picsum.photos/1000/801/?random" alt="img25" /> <figcaption> <h2>Wedding <span>Reception</span></h2> <p> <a href="#"><i class="fa fa-search"></i></a> </p> </figcaption> </figure> </div> <div class="col-md-4"> <figure class="effect-ravi"> <img src="https://picsum.photos/1000/802/?random" alt="img25" /> <figcaption> <h2>Wedding <span>Reception</span></h2> <p> <a href="#"><i class="fa fa-search"></i></a> </p> </figcaption> </figure> </div> </div> <div class="row"> <div class="col"> <figure class="effect-ravi"> <img src="https://picsum.photos/1000/804/?random" alt="img25" /> <figcaption> <h2>Wedding <span>Reception</span></h2> <p> <a href="#"><i class="fa fa-search"></i></a> </p> </figcaption> </figure> </div> <div class="col"> <figure class="effect-ravi"> <img src="https://picsum.photos/1000/805/?random" alt="img25" /> <figcaption> <h2>Wedding <span>Reception</span></h2> <p> <a href="#"><i class="fa fa-search"></i></a> </p> </figcaption> </figure> </div> </div> <div class="row"> <div class="col"> <figure class="effect-ravi"> <img src="https://picsum.photos/2000/300/?random" alt="img25" /> <figcaption> <h2>Wedding <span>Reception</span></h2> <p> <a href="#"><i class="fa fa-search"></i></a> </p> </figcaption> </figure> </div> </div> <div class="row"> <div class="col-md-4"> <figure class="effect-ravi"> <img src="https://picsum.photos/1000/800/?random" alt="img17" /> <figcaption> <h2>Birthday <span>Party</span></h2> <p> <a href="#"><i class="fa fa-search"></i></a> </p> </figcaption> </figure> </div> <div class="col-md-4"> <figure class="effect-ravi"> <img src="https://picsum.photos/1000/801/?random" alt="img25" /> <figcaption> <h2>Wedding <span>Reception</span></h2> <p> <a href="#"><i class="fa fa-search"></i></a> </p> </figcaption> </figure> </div> <div class="col-md-4"> <figure class="effect-ravi"> <img src="https://picsum.photos/1000/802/?random" alt="img25" /> <figcaption> <h2>Wedding <span>Reception</span></h2> <p> <a href="#"><i class="fa fa-search"></i></a> </p> </figcaption> </figure> </div> </div> </div> </div>
.grid figure { position: relative; float: left; overflow: hidden; background: #3085a3; text-align: center; cursor: pointer; } .grid figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 0.8; margin: 0; } .grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; } .grid figure figcaption, .grid figure figcaption>a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .grid figure figcaption>a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .grid figure h2 { word-spacing: -0.15em; font-weight: 300; } .grid figure h2 span { font-weight: 800; } .grid figure h2, .grid figure p { margin: 0; } .grid figure p { letter-spacing: 1px; font-size: 68.5%; } figure.effect-ravi { background: #303fa9; margin: 0; } .grid [class^="col"] { padding: 2px; } figure.effect-ravi h2 { font-size: 158.75%; } figure.effect-ravi h2, figure.effect-ravi p { position: absolute; top: 50%; left: 50%; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -webkit-transform-origin: 50%; transform-origin: 50%; } figure.effect-ravi figcaption::before { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; border: 2px solid #fff; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1); transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1); -webkit-transform-origin: 50%; transform-origin: 50%; } figure.effect-ravi p { width: 100px; text-transform: none; font-size: 121%; line-height: 2; } figure.effect-ravi p a { color: #fff; } figure.effect-ravi p a:hover, figure.effect-ravi p a:focus { opacity: 0.6; } figure.effect-ravi p a i { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } figure.effect-ravi p a:first-child i { -webkit-transform: translate3d(-60px, -60px, 0); transform: translate3d(-60px, -60px, 0); } figure.effect-ravi p a:nth-child(2) i { -webkit-transform: translate3d(60px, -60px, 0); transform: translate3d(60px, -60px, 0); } figure.effect-ravi p a:nth-child(3) i { -webkit-transform: translate3d(-60px, 60px, 0); transform: translate3d(-60px, 60px, 0); } figure.effect-ravi p a:nth-child(4) i { -webkit-transform: translate3d(60px, 60px, 0); transform: translate3d(60px, 60px, 0); } figure.effect-ravi:hover figcaption::before { opacity: 1; -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); } figure.effect-ravi:hover h2 { opacity: 0; -webkit-transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1); transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1); } figure.effect-ravi:hover p i:empty { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* just because it's stronger than nth-child */ opacity: 1; }

Related: See More


Questions / Comments: