"img hover"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <div class="container cube-shadow e-o-quint"> <img class="e-o-quint" src="https://unsplash.it/300/200"> </div> <h2>Awesome Shoe</h2> <p>This shoe is awesome, seriously!</p>
body { text-align: center; font-family: 'Open Sans'; } h2 { text-transform: uppercase; font-family: 'Oswald'; } .container { position: relative; margin: 1em; padding: 0; display: inline-block; z-index: 10; } .container img { display: block; -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } .container:hover img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* The Meat */ .cube-shadow:before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; z-index: -20; margin: 0 13%; width: 74%; height: 100%; box-shadow: 0px 7px 17px rgba(0, 0, 0, 0.7); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: perspective(75px) rotate3d(1, 0, 0, 60deg); -moz-transform: perspective(75px) rotate3d(1, 0, 0, 60deg); -ms-transform: perspective(75px) rotate3d(1, 0, 0, 60deg); -o-transform: perspective(75px) rotate3d(1, 0, 0, 60deg); transform: perspective(75px) rotate3d(1, 0, 0, 60deg); } .cube-shadow:hover:before { box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.6); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } /*Easing Stuff*/ .e-o-quint, .e-o-quint:before{ -webkit-transition: all 150ms cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: all 150ms cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: all 150ms cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: all 150ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */ -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */ }

Related: See More


Questions / Comments: