title: How to create a grid of photos where you can hover them and they will change into other photos?
body: <p>I'm trying to create a grid of photos where you can hover over them and they will change into other images. I've tried placing the image on CSS as background image but when you hover, the other picture doesn't seem to be exactly the same size (when it actually is).</p>
  
  <p>I also tried using two images method (one on top of the other) and it works well with only one image on the page but with a grid of images, it doesn't work because of the <code>position: absolute</code>.</p>
  
  <p>The only way that I found that "sort of" works is by replacing one image for the other but then you don't have a smooth transition (fade into another image).</p>
  
  <p><a href="http://codepen.io/anon/pen/OpJwgL" rel="nofollow noreferrer">Here is the access to code pen (seems to work better)</a>:</p>
  
  <p>Code:</p>
  
  <p>css:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pages-content {
    max-width: 400px
  }
  
  .left {
    padding-left: 5px;
  }
  .right {
    padding-right: 5px;
  }
  .bottom {
    padding-bottom: 10px;
  }
  
  img.a {
   position: absolute;
   left: 0;
   top: 0;
    z-index: 10;
    transition: opacity 1s ease-in-out;
  }
  
  img.a:hover {
    opacity: 0;
  }
  img.b {
   position: absolute;
   left: 0;
   top: 0;
  }
  
  HTML:</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;body&gt;
    &lt;section class="container pages-content"&gt;
      &lt;div class="row"&gt;
     &lt;div class="col-md-12 bottom"&gt;
          &lt;img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/&gt;        
          &lt;!-- trying to use hover to change images
       &lt;img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/&gt;
          &lt;img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/&gt; --&gt;
     &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="row"&gt;
     &lt;div class="col-md-6 col-sm-12 right"&gt;
    &lt;img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" /&gt;
     &lt;/div&gt;
     &lt;div class="col-md-6 col-sm-12 bottom left"&gt;
    &lt;img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" /&gt;
     &lt;/div&gt;
      &lt;/div&gt;
  
   &lt;!-- Second block --&gt;
   &lt;div class="row"&gt;
     &lt;div class="col-md-6 col-sm-12 right "&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6 push-md-6 col-sm-12 bottom left"&gt;
              &lt;img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6 pull-md-6 col-sm-12 bottom right"&gt;
              &lt;img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/&gt;
      &lt;/div&gt;
      &lt;div class="col-md-12 bottom"&gt;
              &lt;img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" /&gt;
      &lt;/div&gt;
      &lt;div class="col-md-12 bottom"&gt;
              &lt;img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
     &lt;/div&gt;&lt;!--./col-md-6--&gt;
     &lt;div class="col-md-6 bottom col-sm-12 left project-image"&gt;
    &lt;img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/&gt;
     &lt;/div&gt;
    &lt;/div&gt;&lt;!--./block 2--&gt;
    &lt;/section&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>