"Fancy Image Hover Effects"
Bootstrap 4.1.1 Snippet by testogni19

<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 ----------> <div class="container-fluid bg-dark"> <!-- Demo Title and Copyright References --> <div class="row mx-auto p-0"> <div class="col-12 text-center mx-auto p-5"> <div class="demo-title"> Fancy Image Hover Effects </div> <div class="demo-copyright"> Designed by <a href="https://bootsnipp.com/sarwal" target="_blank" class="text-light">sarwal</a>. Inspired by <a href="https://bootsnipp.com/Manikanta1023" target="_blank" class="text-light">Manikanta1023</a>'s Hover Effects example.<br> This demo references the Lily, Sadie, Honey, Layla, & Zoe examples.<br> These examples are recreated using div classes rather than grid/figcaptions.<br> Images referenced from <a href="https://www.bhg.com/" target="_blank" class="text-light">Better Homes & Gardens</a>. </div> </div> </div> <!-- Start of Demo 1 - Lily Effect --> <div class="row p-0"> <div class="col-12 text-center mx-auto p-3"> <div class="demo-title"> </div> </div> </div> <div class="row p-1"> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 mx-auto p-1"> <div class="lily-box"> <img src="https://static.onecms.io/wp-content/uploads/sites/37/2018/08/15232727/farmhouse-side-table-1b990c68.jpg"> <div class="lily-caption"> <div class="lily-title"> Lily Effect </div> <div class="lily-desc"> This is the lily effect. Learn more by clicking here. </div> </div> </div> </div> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 mx-auto p-1"> <div class="lily-box"> <img src="https://static.onecms.io/wp-content/uploads/sites/37/2018/08/15232727/farmhouse-side-table-1b990c68.jpg"> <div class="lily-caption"> <div class="lily-title"> Lily Effect </div> <div class="lily-desc"> This is the lily effect. Learn more by clicking here. </div> </div> </div> </div> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 mx-auto p-1"> <div class="lily-box"> <img src="https://static.onecms.io/wp-content/uploads/sites/37/2018/08/15232727/farmhouse-side-table-1b990c68.jpg"> <div class="lily-caption"> <div class="lily-title"> Lily Effect </div> <div class="lily-desc"> This is the lily effect. Learn more by clicking here. </div> </div> </div> </div> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 mx-auto p-1"> <div class="lily-box"> <img src="https://static.onecms.io/wp-content/uploads/sites/37/2018/08/15232727/farmhouse-side-table-1b990c68.jpg"> <div class="lily-caption"> <div class="lily-title"> Lily Effect </div> <div class="lily-desc"> This is the lily effect. Learn more by clicking here. </div> </div> </div> </div> </div> <!-- End of Demo 1 - Lily Effect -->
/* Font Families Imports */ @import url('https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap'); @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); /* Removable Demo Title */ .demo-title { font-family: 'DM Serif Display', serif; font-weight: normal; font-size: 30px; color: #FFFFFF; } /* Removable Demo Copyright Paragraph */ .demo-copyright { font-family: 'Montserrat', sans-serif; font-weight: normal; font-size: 16px; color: #CCCCCC; } /* Demo 1 - Lily Effect */ .lily-box { background-color: #3E606F; position: relative; overflow: hidden; } .lily-box img { transition: opacity 0.35s, transform 0.35s; transform: translate3d(-40px, 0, 0); width: calc(100% + 50px); max-width: none; height: auto; opacity: 0.7; } .lily-box .lily-caption { position: absolute; bottom: 10%; left: 5%; width: 90%; height: auto; } .lily-box .lily-caption .lily-title { transform: translate3d(0, 40px, 0); transition: transform 0.35s; font-family: 'DM Serif Display', serif; font-weight: normal; font-size: 2rem; text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25); text-transform: uppercase; text-decoration: none; text-align: left; color: #FFFFFF; } .lily-box .lily-caption .lily-desc { font-family: 'Montserrat', sans-serif; font-weight: normal; font-size: 16px; text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25); text-transform: uppercase; text-decoration: none; text-align: left; transform: translate3d(0, 40px, 0); color: #FEFEFE; opacity: 0; transition: opacity 0.2s, transform 0.35s; } .lily-box:hover img { transform: translate3d(0, 0, 0); opacity: 1; } .lily-box:hover .lily-caption .lily-title { transform: translate3d(0, 0, 0); } .lily-box:hover .lily-caption .lily-desc { transition-delay: 0.05s; transition-duration: 0.35s; transform: translate3d(0, 0, 0); opacity: 1; }

Questions / Comments: