"Image Hover Zoom"
Bootstrap 3.0.0 Snippet by Siddharth Panchal

Post to Facebook Tweet this

<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 ----------> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'> </head> <body> <div align="center" class="fond"> <div class="title">CSS HOVER ZOOM EFFECT</div> <div style="width:1000px;margin-top:50px;margin-bottom:50px;"> <div class="style_prevu_kit" style="background-color:#5C3A7E;"></div> <div class="style_prevu_kit" style="background-color:#f8b334;"></div> <div class="style_prevu_kit" style="background-color:#97bf0d;"></div> <div class="style_prevu_kit" style="background-color:#2578B4;"></div> <div class="style_prevu_kit" style="background-color:#FD443A;"></div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
.title{text-shadow:1px 1px 1px #000;padding:5px;color:#b5e6e3;font-weight:300;font-size:30px;font-family:'Roboto';padding-top:20px;} .title:hover{-webkit-transition: all 300ms ease-in;-ms-transition: all 300ms ease-in;-moz-transition: all 300ms ease-in;transition: all 300ms ease-in;font-size:35px;} .fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0;background: -moz-linear-gradient(90deg, #02AAB0 0%, #00CDAC 100%);background: -webkit-linear-gradient(90deg, #02AAB0 0%, #00CDAC 100%);background: -o-linear-gradient(90deg, #02AAB0 0%, #00CDAC 100%);background: -ms-linear-gradient(90deg, #02AAB0 0%, #00CDAC 100%);background: linear-gradient(90deg, #02AAB0 0%, #00CDAC 100%);} .style_prevu_kit{display:inline-block;border:0;width:196px;height:210px;position: relative;-webkit-transition: all 300ms ease-in;-webkit-transform: scale(1);-ms-transition: all 300ms ease-in;-ms-transform: scale(1);-moz-transition: all 300ms ease-in;-moz-transform: scale(1);transition: all 300ms ease-in;transform: scale(1);} .style_prevu_kit:hover{box-shadow: 0px 0px 150px #000000;z-index: 2;-webkit-transition: all 300ms ease-in;-webkit-transform: scale(1.5);-ms-transition: all 300ms ease-in;-ms-transform: scale(1.5);-moz-transition: all 300ms ease-in;-moz-transform: scale(1.5);transition: all 300ms ease-in;transform: scale(1.5);border-radius: 500px;}

Related: See More

Full Calendar
Image Crop jQuery
Hover Effect Style
Different types of hover and transition effect.

Questions / Comments: