<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="bg-items"> <div class="items" style="background-image : url('img/baby-1399332_960_720.jpg');"> <div class="one"></div> <div class="details"> <h3>Effect #1</h3> <p>Fusce eros mauris, vehicula vel rhoncus id, accumsan at justo. Nulla nec ex mollis, rhoncus quam quis, feugiat quam. Donec auctor turpis ex, a pretium tellus mollis sed. Nam vehicula libero at nulla euismod. </p> <h6>Date: 5/5/2016</h6> </div> </div> </div>

.bg-items { cursor: pointer; display: inline-block; float: left; margin: 1%; width: 48%; } .items { background-color: #C97131; background-size: cover; height: 286px; overflow: hidden; position: relative; width: 100%; } .details { color: #fff; font-family: "Jaldi",sans-serif; font-size:25px; height: 286px; left: 0; opacity: 0; padding: 5%; top: 0; transition: opacity 0.8s ease 0s; width: 90%; } .opticy{ background-color : rgba(0,0,0,0.5); } .details h3 { margin-bottom : 20px; } .details h6 { text-align : right; margin-top : 40px; } .details p { font-size : 14px; font-style: italic; text-align: center; line-height : 20px; } .items:hover .details { opacity : 1; -webkit-transition: opacity .2s .3s; transition : opacity .2s .3s; } .items div { position : absolute; } .one { left : 100%; bottom : 100%; width : inherit; height: inherit; background-color : rgba(254, 219, 29, 0.7); -webkit-transition: all .3s; transition : all .3s; } .items:hover .one { -webkit-transition: all .3s; transition : all .3s; left : 0; bottom : 0; } .two { width : inherit; height: inherit; background-color : rgba(254, 219, 29, 0.7); -webkit-transition: all .3s; transition : all .3s; left : 0; bottom : 100%; } .items:hover .two { -webkit-transform : rotate(180deg); transform : rotate(180deg); left : 0; bottom : 0; -webkit-transition: all .3s; transition : all .3s; }