How to create a grid of photos where you can hover them and they will change into other photos?

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).

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 position: absolute.

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).

Here is the access to code pen (seems to work better):

Code:

css:

.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:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <section class="container pages-content">
    <div class="row">
	  <div class="col-md-12 bottom">
        <img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/>        
        <!-- trying to use hover to change images
	    <img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
        <img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> -->
	  </div>
	</div>
	<div class="row">
	  <div class="col-md-6 col-sm-12 right">
		<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
	  </div>
	  <div class="col-md-6 col-sm-12 bottom left">
		<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
	  </div>
    </div>

	<!-- Second block -->
	<div class="row">
	  <div class="col-md-6 col-sm-12 right ">
		<div class="row">
		  <div class="col-md-6 push-md-6 col-sm-12 bottom left">
            <img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
		  </div>
		  <div class="col-md-6 pull-md-6 col-sm-12 bottom right">
            <img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
		  </div>
		  <div class="col-md-12 bottom">
            <img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
		  </div>
		  <div class="col-md-12 bottom">
            <img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
		  </div>
		</div>
	  </div><!--./col-md-6-->
	  <div class="col-md-6 bottom col-sm-12 left project-image">
		<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
	  </div>
	 </div><!--./block 2-->
  </section>
</body>

Answers 1

  • I am not sure if this is what you were looking for.

    .row {
      display: flex;
      flex-direction: row;
    }
    
    .flex-item {
      min-width: 200px;
      min-height: 200px;
    }
    
    .hover-img {
      transition: background-image 1s ease-in-out;
      background-size: cover;
    }
    
    .img-1 {
      background-image: url(https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg);
      width: 400px;
      /*
      height: 200px;*/
      flex-grow: 2;
    }
    
    .img-1:hover {
      background-image: url(http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg);
    }
    
    .img-2 {
      background-image: url(http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg);
      /* width: 200px;
      height: 200px;*/
      flex-grow: 1;
    }
    
    .img-2:hover {
      background-image: url(http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif);
    }
    
    .img-3 {
      background-image: url(http://donsmaps.com/clickphotos/dolnivi200x100.jpg);
      /*width: 200px;
      height: 200px;*/
      flex-grow: 1;
    }
    
    .img-3:hover {
      background-image: url(http://markcarson.com/images/SunBird-7-200x200.png);
    }
    
    .img-4 {
      /*max-width:400px;*/
      flex-grow: 2;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
    
    <body>
      <section class="container pages-content">
        <div class="row">
    
          <div class="flex-item hover-img img-1"></div>
          <div class="flex-item  hover-img img-2"></div>
          <div class="flex-item  hover-img img-3"></div>
          <img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" class="flex-item  img-4" />
    
        </div>
      </section>
    </body>


Related Articles