3D Services section

by Gautam

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<body>
<!-- <div class="bs-example"> -->

 <div class="container">
    <div class="row">
         <div class="col-md-3">
             <img src="http://goo.gl/rjiz6x" class="img-responsive" alt="Email-marketing" style="margin-top:100px;">
         </div>
     </div> <!-- end of row -->
 </div> <!-- end of container -->
</div>
</body>

CSS

img{
        /*transition:all 10s;*/
        -webkit-transition:all .4s ease-out 0s;
        -moz-transition:all .4s ease-out 0s;
        transition:all .4s ease-out 0s;
        /*transition:top 2s;*/
        padding: 5px;
        background-color: yellow;
        position: relative;
        top:0px;
        width:auto;
        height:150px !important; /* important because bootstrap overriddes this property otherwise */
        -webkit-box-shadow: -5px 34px 37px -13px rgba(0,0,0,0.8);
-moz-box-shadow: -5px 34px 37px -13px rgba(0,0,0,0.8);
box-shadow: -5px 34px 37px -13px rgba(0,0,0,0.8);
    }
   

img:hover{
        top: -15px;
        background-color: red;
-webkit-box-shadow: -5px 44px 37px -13px rgba(0,0,0,0.5);
-moz-box-shadow: -5px 44px 37px -13px rgba(0,0,0,0.5);
box-shadow: -5px 44px 37px -13px rgba(0,0,0,0.5);
    }