Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
body {
font-family: 'Oswald', sans-serif;
color: #3a3a3a;
background-color: #F2F3D7;
}
.container-fluid {
margin: 0 auto;
}
h3 {
text-align: center;
margin-bottom: 1em;
}
.row {
margin-top: 2.5%;
}
.box {
max-width: 400px;
max-height: 300px;
overflow: hidden;
cursor: pointer;
}
.box1 {
background-color: red;
}
.box2 {
background-color: blue;
}
.box3 {
background-color: green;
}
.box4 {
background-color: purple;
}
.box5 {
background-color: yellow;
}
.box6 {
background-color: orange;
}
img {
width: 100%;
max-width: 420px;
height: auto;
opacity: 0.75;
overflow: hidden;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition-timing-function: ease-in;
transition: 1.5s;
}
img:hover {
opacity: 1;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
-moz-transform: scale(1.25);
-webkit-transform: scale(1.25);
transform: scale(1.25);
transition-timing-function: ease-in;
transition: 1.5s;
}
</style>
</head>
<body>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Oswald'>
<div class="container-fluid">
<h3>Pure CSS Picture Grid Color Overlay On Hover Zoom</h3>
<div class="row row1">
<div class="col-md-4 col-xs-4">
<div class="box box1">
<img src="http://devanswer.com/codes/files/overlay1.jpg">
</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="box box2">
<img src="http://devanswer.com/codes/files/overlay2.jpg">
</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="box box3">
<img src="http://devanswer.com/codes/files/overlay3.jpg">
</div>
</div>
</div>
<div class="row row2">
<div class="col-md-4 col-xs-4">
<div class="box box4">
<img src="http://devanswer.com/codes/files/overlay4.jpg">
</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="box box5">
<img src="http://devanswer.com/codes/files/overlay5.jpg">
</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="box box6">
<img src="http://devanswer.com/codes/files/overlay6.jpg">
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
</body>
</html>