logo DevAnswer - Developers Answer

Pure CSS Picture Grid Color Overlay Zoom on Hover

9th February

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>                        



Other Codes