"photo gallery : hover + color + zoom effect"
Bootstrap 3.0.0 Snippet by jon2840

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 ----------> <div dir="ltr" style="text-align: left;" trbidi="on"> <html> <style> @import url('http://fonts.googleapis.com/css?family=Open+Sans:300'); .gallery { width: 1060px; margin: 0 auto; padding: 5px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .gallery > div { position: relative; float: left; padding: 5px; } .gallery > div > img { display: block; width: 200px; transition: .1s transform; transform: translateZ(0); /* hack */ } .gallery > div:hover { z-index: 1; } .gallery > div:hover > img { transform: scale(1.7,1.7); transition: .3s transform; } .cf:before, .cf:after { display: table; content: ""; line-height: 0; } .cf:after { clear: both; } h1 { margin: 40px 0; font-size: 30px; font-weight: 300; text-align: center; } img { filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ -webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); margin-bottom:20px; } img:hover { filter: none; /* IE6-9 */ -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */ </style> <div class="gallery cf"> <div> <img class="img-responsive" src="https://3.bp.blogspot.com/-IlZtgZrRrJs/VGSR4lcqMBI/AAAAAAAAQGw/pfNZOFV7vVE/s1600/rajiv-bhai.png" /> </div> <div> <img class="img-responsive" src="https://3.bp.blogspot.com/-IlZtgZrRrJs/VGSR4lcqMBI/AAAAAAAAQGw/pfNZOFV7vVE/s1600/rajiv-bhai.png" /> </div> <div> <img class="img-responsive" src="https://3.bp.blogspot.com/-IlZtgZrRrJs/VGSR4lcqMBI/AAAAAAAAQGw/pfNZOFV7vVE/s1600/rajiv-bhai.png" /> </div> <div> <img class="img-responsive" src="https://3.bp.blogspot.com/-IlZtgZrRrJs/VGSR4lcqMBI/AAAAAAAAQGw/pfNZOFV7vVE/s1600/rajiv-bhai.png" /> </div> <div> <img class="img-responsive" src="https://3.bp.blogspot.com/-IlZtgZrRrJs/VGSR4lcqMBI/AAAAAAAAQGw/pfNZOFV7vVE/s1600/rajiv-bhai.png" /> </div> </div> </html> <br /></div>

Related: See More

Vue Paper Dashboard
Hover Effect Style
Different types of hover and transition effect.
Sonar Wave Effect in Circle With CSS

Questions / Comments: