LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.gallery {
  position: relative;
}
.gallery:hover .thumb {
  opacity: .7;
}
.thumb {
  height: 100px;
  width: 12.5%;
  background: no-repeat center center;
  background-size: cover;
  transition: opacity 600ms;  
}
.gallery .thumb:hover {
  opacity: 1; /* overrides blur, so active img is not blurred */
}
.thumb:before, .thumb:after { 
  opacity: 0; 
  width: 45%;
}
.thumb:last-of-type:before, .thumb:last-of-type:after { opacity: 1; }
.thumb:hover:before, .thumb:hover:after { 
  z-index: 100; /* so this image stays on top */
  opacity: 1;
  transition: opacity 2000ms;
}
/* this is the full-size image  */
.thumb:before { 
  content: '';
  position: absolute;
  top: 0; left: 12.5%;
  height: 100%;
  padding-left: 20px; /* creates gap */
  background: inherit;
  background-position: 20px center; /* moves the image slightly right so there's a gap between thumbnails and full-size */
}
/* this is the caption */
.thumb:after {
  content: attr(data-caption);
  position: absolute;
  bottom: 0;
  left: 15%;
  height: 1em;
  padding-bottom: .5em;
  text-align: center;
  font-size: 1.4rem;
  font-style: italic;
  color: #fff;
}


/*
* CSS below just sets src of each image
* could also be applied inline with HTML if needed to be dynamic
*/
.thumb.london {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/paris-thumb.jpg);
}
.thumb.paris {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/london-thumb.jpg);
}
.thumb.sf {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/san-francisco.jpg);
}
Host Instantly Drag and Drop Website Builder

 

Description

A pure CSS image gallery with optimized HTML and minimal HTTP requests.
Term
Wed, 11/29/2017 - 11:19

Related Codes

Pen ID
Pen ID
Pen ID