CodePen Embed - CSS3 Transitions Thumb Gallery (2012)

<div>
    
  <h1>Enhancing your thumb galleries using CSS3 Transitions and Transforms</h1>
  <p>For the best viewing experience, open up Chrome. Firefox 10 is pretty capable but is slightly buggy with the on click examples (it does finally support 3D Transforms though!).</p>

  <h2 id="gal-one">Gallery One <span>Enlarge on Hover</span></h2>
  <ul class="gal-1">

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/1.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/2.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/3.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/4.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/5.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/6.jpg" alt=""></li>

  </ul>

  <h2 id="gal-two">Gallery Two <span>Rotate/Enlarge on Hover</span></h2>
  <ul class="gal-2">

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/1.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/2.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/3.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/4.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/5.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/6.jpg" alt=""></li>

  </ul>

  <h2 id="gal-three">Gallery Three <span>Scattered, Enlarge on Hover</span></h2>
  <ul class="gal-3">

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/1.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/2.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/3.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/4.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/5.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/6.jpg" alt=""></li>

  </ul>

  <h2 id="gal-four">Gallery Four <span>Enlarge to Centre on Hover</span></h2>
  <ul class="gal-4">

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/1.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/2.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/3.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/4.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/5.jpg" alt=""></li>

    <li><img src="https://ste.digital/demos/css3-enhanced-galleries/6.jpg" alt=""></li>

  </ul>

  <h2 id="gal-five">Gallery Five <span>Enlarge on Click</span></h2>
  <ul class="gal-5">

    <li id="one"><a class="close" href="#gal-five">Close</a><a href="#one"><img src="https://ste.digital/demos/css3-enhanced-galleries/1.jpg" alt=""></a></li>

    <li id="two"><a class="close" href="#gal-five">Close</a><a href="#two"><img src="https://ste.digital/demos/css3-enhanced-galleries/2.jpg" alt=""></a></li>

    <li id="three"><a class="close" href="#gal-five">Close</a><a href="#three"><img src="https://ste.digital/demos/css3-enhanced-galleries/3.jpg" alt=""></a></li>

    <li id="four"><a class="close" href="#gal-five">Close</a><a href="#four"><img src="https://ste.digital/demos/css3-enhanced-galleries/4.jpg" alt=""></a></li>

    <li id="five"><a class="close" href="#gal-five">Close</a><a href="#five"><img src="https://ste.digital/demos/css3-enhanced-galleries/5.jpg" alt=""></a></li>

    <li id="six"><a class="close" href="#gal-five">Close</a><a href="#six"><img src="https://ste.digital/demos/css3-enhanced-galleries/6.jpg" alt=""></a></li>

  </ul>

  <h2 id="gal-six">Gallery Six <span>3D Flip/Enlarge on Click <strong>(Best viewed in Chrome)</strong></span></h2>
  <ul class="gal-6">

    <li id="onea"><a class="close" href="#gal-six">Close</a><a href="#onea"><img src="https://ste.digital/demos/css3-enhanced-galleries/1.jpg" alt=""></a></li>

    <li id="twoa"><a class="close" href="#gal-six">Close</a><a href="#twoa"><img src="https://ste.digital/demos/css3-enhanced-galleries/2.jpg" alt=""></a></li>

    <li id="threea"><a class="close" href="#gal-six">Close</a><a href="#threea"><img src="https://ste.digital/demos/css3-enhanced-galleries/3.jpg" alt=""></a></li>

    <li id="foura"><a class="close" href="#gal-six">Close</a><a href="#foura"><img src="https://ste.digital/demos/css3-enhanced-galleries/4.jpg" alt=""></a></li>

    <li id="fivea"><a class="close" href="#gal-six">Close</a><a href="#fivea"><img src="https://ste.digital/demos/css3-enhanced-galleries/5.jpg" alt=""></a></li>

    <li id="sixa"><a class="close" href="#gal-six">Close</a><a href="#sixa"><img src="https://ste.digital/demos/css3-enhanced-galleries/6.jpg" alt=""></a></li>

  </ul>

</div>

div {
  width:30%;
  min-width:300px;
  margin:0 auto;
  font-size:100%;
}

div:after {
  content:"";
  display:block;
  clear:both;
  height:50px;
}

h1 {
  font:bold 1.2em Arial, Helvetica, sans-serif;
  padding:10px;
  background:#eee;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  border:2px dashed #ccc;
  color:#333;
}

h1 a {
  display:block;
  font:normal 0.5em "Times New Roman", Times, serif;
  text-transform:uppercase;
  letter-spacing:0.2em;
  text-decoration:none;
  color:#666;
  padding:5px 0 0;
}

h1 a:hover {
  text-decoration:underline;
}

h1 + p {
  font:0.8em/1.5em Arial, Helvetica, sans-serif;
}

h2 {
  font:bold 1.1em Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  margin:20px 0 0;
  color:#666;
  border-bottom:1px dotted #ccc;
  border-top:1px dotted #ccc;
  float:left;
  width:100%;
  padding:5px 0;
}

h2 span {
  font-size:0.7em;
  font-weight:normal;
  text-transform:none;
}

ul {
  width:100%;
  background:#ccc;
  list-style:none;
  float:left;
  padding:0 0 2.5% 0;
  margin-top:5px;
}

ul li {
  width:30%;
  float:left;
  margin:2.5% 0 0 2.5%;
  position:relative;
}

ul li img {
  max-width:100%;
  float:left;
  border:2px solid #eee;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

/*----------------------------------------
  Gallery One
-----------------------------------------*/
.gal-1 li {
  -moz-transition:all 0.6s ease;
  -webkit-transition:all 0.6s ease;
  -ms-transition:all 0.6s ease;
  -o-transition:all 0.6s ease;
  transition:all 0.6s ease;
  opacity:0.5;
}

.gal-1 li:hover {
  -moz-transform:scale(1.4);
  -webkit-transform:scale(1.4);
  -o-transform:scale(1.4);
  -ms-transform:scale(1.4);
  transform:scale(1.4);
  z-index:2;
  opacity:1;
  -moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
  box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}

/*----------------------------------------
  Gallery Two
-----------------------------------------*/
.gal-2 li {
  -moz-transition:all 1s ease;
  -webkit-transition:all 1s ease;
  -o-transition:all 1s ease;
  -ms-transition:all 1s ease;
  transition:all 1s ease;
  opacity:0.8;
}

.gal-2 li:hover {
  -moz-transform:scale(1.4) rotate(360deg);
  -webkit-transform:scale(1.4) rotate(360deg);
  -o-transform:scale(1.4) rotate(360deg);
  -ms-transform:scale(1.4) rotate(360deg);
  transform:scale(1.4) rotate(360deg);
  z-index:2;
  opacity:1;
  -moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
  box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}

/*----------------------------------------
  Gallery Three
-----------------------------------------*/
.gal-3 li {
  -moz-transition:all 1s ease;
  -webkit-transition:all 1s ease;
  -o-transition:all 1s ease;
  -ms-transition:all 1s ease;
  transition:all 1s ease;
  -moz-transform:rotate(20deg) translate(20px, 5px);
  -webkit-transform:rotate(20deg) translate(20px, 5px);
  -o-transform:rotate(20deg) translate(20px, 5px);
  -ms-transform:rotate(20deg) translate(20px, 5px);
  transform:rotate(20deg) translate(20px, 5px);
}

.gal-3 li:nth-of-type(2) {
  -moz-transform:rotate(-10deg) translate(0, 10px);
  -webkit-transform:rotate(-10deg) translate(0, 10px);
  -o-transform:rotate(-10deg) translate(0, 10px);
  -ms-transform:rotate(-10deg) translate(0, 10px);
  transform:rotate(-10deg) translate(0, 10px);
}

.gal-3 li:nth-of-type(3) {
  -moz-transform:rotate(10deg) translate(0, 20px);
  -webkit-transform:rotate(10deg) translate(0, 20px);
  -o-transform:rotate(10deg) translate(0, 20px);
  -ms-transform:rotate(10deg) translate(0, 20px);
  transform:rotate(10deg) translate(0, 20px);
}

.gal-3 li:nth-of-type(4) {
  -moz-transform:rotate(-30deg) translate(20px, -10px);
  -webkit-transform:rotate(-40deg) translate(20px, -10px);
  -o-transform:rotate(-40deg) translate(20px, -10px);
  -ms-transform:rotate(-40deg) translate(20px, -10px);
  transform:rotate(-40deg) translate(20px, -10px);
}

.gal-3 li:nth-of-type(5) {
  -moz-transform:rotate(5deg) translate(0, -10px);
  -webkit-transform:rotate(5deg) translate(0, -10px);
  -o-transform:rotate(5deg) translate(0, -10px);
  -ms-transform:rotate(5deg) translate(0, -10px);
  transform:rotate(5deg) translate(0, -10px);
}

.gal-3 li:nth-of-type(6) {
  -moz-transform:rotate(-5deg) translate(-10px, -10px);
  -webkit-transform:rotate(-5deg) translate(-10px, -10px);
  -o-transform:rotate(-5deg) translate(-10px, -10px);
  -ms-transform:rotate(-5deg) translate(-10px, -10px);
  transform:rotate(-5deg) translate(-10px, -10px);
}

.gal-3 li:hover {
  -moz-transform:scale(2);
  -webkit-transform:scale(2);
  -o-transform:scale(2);
  -ms-transform:scale(2);
  transform:scale(2);
  z-index:2;
  -moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
  box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}

/*----------------------------------------
  Gallery Four
-----------------------------------------*/
.gal-4 li {
  -moz-transition:all 1s ease;
  -webkit-transition:all 1s ease;
  -o-transition:all 1s ease;
  -ms-transition:all 1s ease;
  transition:all 1s ease;
}

.gal-4 li:hover {
  -moz-transform:scale(2.6) translate(52px, 22px);
  -webkit-transform:scale(2.6) translate(52px, 22px);
  -o-transform:scale(2.6) translate(52px, 22px);
  -ms-transform:scale(2.6) translate(52px, 22px);
  transform:scale(2.6) translate(52px, 22px);
  z-index:2;
}

.gal-4 li:nth-of-type(2):hover {
  -moz-transform:scale(2.6) translate(0, 22px);
  -webkit-transform:scale(2.6) translate(0, 22px);
  -o-transform:scale(2.6) translate(0, 22px);
  -ms-transform:scale(2.6) translate(0, 22px);
  transform:scale(2.6) translate(0, 22px);
}

.gal-4 li:nth-of-type(3):hover {
  -moz-transform:scale(2.6) translate(-52px, 22px);
  -webkit-transform:scale(2.6) translate(-52px, 22px);
  -o-transform:scale(2.6) translate(-52px, 22px);
  -ms-transform:scale(2.6) translate(-52px, 22px);
  transform:scale(2.6) translate(-52px, 22px);
}

.gal-4 li:nth-of-type(4):hover {
  -moz-transform:scale(2.6) translate(52px, -22px);
  -webkit-transform:scale(2.6) translate(52px, -22px);
  -o-transform:scale(2.6) translate(52px, -22px);
  -ms-transform:scale(2.6) translate(52px, -22px);
  transform:scale(2.6) translate(52px, -22px);
}

.gal-4 li:nth-of-type(5):hover {
  -moz-transform:scale(2.6) translate(0, -22px);
  -webkit-transform:scale(2.6) translate(0, -22px);
  -o-transform:scale(2.6) translate(0, -22px);
  -ms-transform:scale(2.6) translate(0, -22px);
  transform:scale(2.6) translate(0, -22px);
}

.gal-4 li:nth-of-type(6):hover {
  -moz-transform:scale(2.6) translate(-52px, -22px);
  -webkit-transform:scale(2.6) translate(-52px, -22px);
  -o-transform:scale(2.6) translate(-52px, -22px);
  -ms-transform:scale(2.6) translate(-52px, -22px);
  transform:scale(2.6) translate(-52px, -22px);
}

/*----------------------------------------
  Gallery Five
-----------------------------------------*/
.gal-5 li {
  -moz-transition:all 0.6s ease;
  -webkit-transition:all 0.6s ease;
  -o-transition:all 0.6s ease;
  -ms-transition:all 0.6s ease;
  transition:all 0.6s ease;
  opacity:0.6;
  position:relative;
}

.gal-5 li:hover {
  opacity:1;
}

.gal-5 li:target {
  -moz-transform:scale(2.2);
  -webkit-transform:scale(2.2);
  -o-transform:scale(2.2);
  -ms-transform:scale(2.2);
  transform:scale(2.2);
  z-index:2;
  opacity:1;
}

.gal-5 li:target img {
  -moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
  box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}

.close {
  display:none;
  font:0.3em/1em Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  letter-spacing:0.3em;
  text-decoration:none;
  background:#c15252;
  padding:2px 2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  color:#fff;
  position:absolute;
  top:-3px;
  right:0;
  -moz-ox-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
  box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
}

.close:hover {
  background:#d06464;
}

.gal-5 li:target .close {
  display:inline;
}

/*----------------------------------------
  Gallery Six
-----------------------------------------*/
.gal-6 li {
  -moz-transition:all 1s ease;
  -webkit-transition:all 1s ease;
  -o-transition:all 1s ease;
  -ms-transition:all 1s ease;
  transition:all 1s ease;
  opacity:0.6;
  position:relative;
}

.gal-6 li:hover {
  opacity:1;
}

.gal-6 li:target {
  -moz-transform:scale(2.2) rotateY(360deg);
  -webkit-transform:scale(2.2) rotateY(360deg);
  -o-transform:scale(2.2) rotateY(360deg);
  -ms-transform:scale(2.2) rotateY(360deg);
  transform:scale(2.2) rotateY(360deg);
  z-index:2;
  opacity:1;
}

.gal-6 li:nth-of-type(even):target {
  -moz-transform:scale(2.2) rotateX(360deg);
  -webkit-transform:scale(2.2) rotateX(360deg);
  -o-transform:scale(2.2) rotateX(360deg);
  -ms-transform:scale(2.2) rotateX(360deg);
  transform:scale(2.2) rotateX(360deg);
}

.gal-6 li:target img {
  -moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
  box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}

.close {
  display:none;
  font:0.3em/1em Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  letter-spacing:0.3em;
  text-decoration:none;
  background:#c15252;
  padding:2px 2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  color:#fff;
  position:absolute;
  top:-3px;
  right:0;
  -moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
  box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
}

.close:hover {
  background:#d06464;
}

.gal-6 li:target .close {
  display:inline;
}

This Pen is owned by Stephen Greig on CodePen.

See more by @stephengreig on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.