"Image Overlay Hover Effects With CSS3"
Bootstrap 4.0.0 Snippet by riversidenorth

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div class="center"> <div class="imagebox"> <img src="http://www.divscode.com/bootimg/pexel.jpeg" alt=""> <div class="main-content"> <div class="content"> <h1>Why do we use it?</h1> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ,</p> </div> </div> </div> </div> </body>
body{ margin: 0px; padding: 0px; background: #262626; } .center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .imagebox{ position: relative; width:500px; height: 300px; background-size: cover; border:2px solid #fff; overflow: hidden; } .imagebox img{ width: 100%; transition: .5s; } .main-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; transition: .5s; } .main-content:before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transform: translateX(-100%) scale(1) skew(-45deg); transition: .5s; } .content{ position: absolute; top: 50%; transform: translateY(-50%); padding: 30px 50px; text-align: center; } .content h1{ padding: 0px; color: #fff; margin-bottom: 20px; font-size: 30px; transform: translateY(-100%) scale(0); transition: .5s; } .content p{ padding: 0px; color: #fff; font-size: 17px; transform: scale(2); transition: .5s; opacity: 0; } .imagebox:hover .content h1{ transform: translateY(0) scale(1); } .imagebox:hover .content p{ transform: scale(1); opacity: 1; } .imagebox:hover img{ transform: scale(1.5) translateX(50px); transition: .5s; } .imagebox:hover .main-content:before{ opacity: 1; background: rgba(255,0,0,.8); transform: translateX(0) scale(1) skew(-45deg); }

Related: See More


Questions / Comments: