<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <h1 class="text-center mr10">Banner Hover Effect</h1> <div class="col-md-4 hidden-sm hidden-xs wrapper-banner"> <a class="banner mr10" href="#"><img src="http://magento2.flytheme.net/themes/sm_smarket/pub/media/wysiwyg/banner/1.jpg" alt=""></a> </div> <div class="col-md-4 hidden-sm hidden-xs wrapper-banner"> <a class="banner mr10" href="#"><img src="http://magento2.flytheme.net/themes/sm_smarket/pub/media/wysiwyg/banner/2.jpg" alt=""></a> </div> <div class="col-md-4 hidden-sm hidden-xs wrapper-banner"> <a class="banner mr10" href="#"><img src="http://magento2.flytheme.net/themes/sm_smarket/pub/media/wysiwyg/banner/3.jpg" alt=""></a> </div> </div> </div>

.mr10 { margin-bottom: 10px; } .banner { display: block; overflow: hidden; position: relative; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; } .banner:before { background: rgba(0, 0, 0, 0.5) url(http://magento2.flytheme.net/themes/sm_smarket/pub/static/frontend/Sm/smarket/en_US/images/iconbr.png) no-repeat scroll center center; content: ''; height: 100%; left: 0; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; position: absolute; top: 0; transform: scale(0.5) rotateY(180deg); -moz-transform: scale(0.5) rotateY(180deg); -webkit-transform: scale(0.5) rotateY(180deg); -ms-transform: scale(0.5) rotateY(180deg); transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s; visibility: hidden; width: 100%; z-index: 9; } .banner:hover:before { transform: scale(1) rotateY(0deg); -moz-transform: scale(1) rotateY(0deg); -webkit-transform: scale(1) rotateY(0deg); -ms-transform: scale(1) rotateY(0deg); visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; }