A Pen by Joshua Mitchell.

Creative-Caption-Gallery-(Responsive).markdown

Creative Caption Gallery (Responsive)

Hover on each image to view its caption! This is a work in progress, I'm planning to add to it. There's also a mobile version. Made with love and pure CSS.

A Pen by Joshua Mitchell on CodePen.

License.

index.html

<h2>Creative Caption Gallery</h2>
<div class="image-container image-container-num1">
  <div class="image image-num1">
    <img src="http://lorempixel.com/g/300/300/technics/" />
  </div>
  <div class="caption caption-num1">
    <span class="bottom">There's<br>always a siren</span>
  </div>
</div><br class="break">
<div class="image-container image-container-num2">
  <div class="image image-num2">
    <img src="http://lorempixel.com/g/200/300/city/" />
  </div>
  <div class="caption caption-num2">
    Singing you to shipwreck
  </div>
</div><br class="break">
<div class="image-container image-container-num3">
  <div class="image image-num3">
    <img src="http://lorempixel.com/g/300/200/nightlife/" />
  </div><br class="break">
  <div class="caption caption-num3">
    Steer away from these rocks
  </div>
</div><br class="break">
<div class="image-container image-container-num4">
  <div class="image image-num4">
    <img src="http://lorempixel.com/g/300/300/transport/" />
  </div>
  <div class="caption caption-num4">
    We'd be a walking disaster
  </div><br class="break">
</div><br class="break">
<div class="image-container image-container-num5">
  <div class="image image-num5">
    <img src="http://lorempixel.com/g/300/300/abstract/" />
  </div>
  <div class="caption caption-num5">
    Just 'cause you feel it
  </div>
</div><br class="break">
<div class="image-container image-container-num6">
  <div class="image image-num6">
    <img src="http://lorempixel.com/g/200/200/people/" />
  </div>
  <div class="caption caption-num6">
    Doesn't mean it's there.
  </div>
</div>
<!--EXPERIMENTAL-->
<!--<br class="break">
<div class="image-container image-container-num7">
  <div class="image image-num7">
    <img src="http://lorempixel.com/g/300/300/animals/" />
  </div>
  <div class="caption caption-num7">
    Someone on your shoulder<br>
    Someone on your shoulder<br>
    There there!
  </div>
</div>-->

script.js

//Feel free to use however you would like!
//Lyrics (captions) by Radiohead ^^

//Song: There, There
//Album: Hail to the Thief

style.css

html, body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Lato", Segoe UI, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 100;
  color: #fff;
  text-align: center;
}
h2 {
  color: #333;
  font-size: 45px;
  margin: 32px;
}
.image-container {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}
.image {
  width: 200px;
  height: 200px;
  z-index: 1;
  transition: all .5s;
}
.image img {
  max-width: 100%;
}
.caption {
  width: 200px;
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(0,0,0,.8);
  z-index: 2;
  font-weight: 300;
  transition: all .5s;
}
.caption-num1 {
  position: relative;
  height: 60px;
  padding: none;
  transform: rotate(45deg) translateY(-280px) translateX(-50%);
}
.bottom {
  position: absolute;
  bottom: 15px;
  left: 0px;
  right: 0;
}
.image-container-num1:hover .caption-num1 {
  transform: rotate(45deg) translateY(-200px) translateX(-50%)
}
.caption-num2 {
  transform: translateY(140px);
}
.image-container-num2:hover .image-num2 {
  opacity: .8;
  transform: translateY(-50%) translateY(0px);
}
.image-container-num2:hover .caption-num2 {
  transform: translateY(-37px);
}
.image-num3 img {
  max-width: none;
  max-height: 100%;
}
.image-num3 {
  direction: rtl;
}
.caption-num3 {
  opacity: 0;
  width: 300px;
  text-align:right;
  padding-right: 14px;
  transform: translateY(-100%);
}
.image-container-num3:hover .image-num3 {
  transform: translateX(50%);
}
.image-container-num3:hover .caption-num3 {
  opacity: 1;
  transform: translateY(-100%) translateX(-114px);
}
.image-container-num4:hover .image-num4 {
  transform: scale(1.5) rotate(-10deg);
}
.image-container-num4:hover .caption-num4 {
  transform: translateY(-100%);
}
.image-num5 img {
  max-width: none;
  transform: translateY(-50px) translateX(-50px);
}
.caption-num5 {
  transform: translateY(-100%);
  opacity: 0;
}
.image-container-num5:hover .image-num5 {
  transform: rotate(45deg);
}
.image-container-num5:hover .caption-num5 {
  opacity: 1;
}
.caption-num6 {
  transform: translateY(-200px) translateY(-100%);
}
.image-container-num6:hover .caption-num6 {
  transform: translateY(-200px);
}
.image-container-num6:hover .image-num6 {
  opacity: .5;
}
.caption-num7 {
  height: 200px;
  background: none;
  color: #333;
  font-size: 20px;
  opacity: 0;
}
.image-container-num7:hover .caption-num7 {
  opacity: 1;
  transform: translateY(-75%);
}
.image-container-num7:hover .image-num7 {
  transform: scale(1.5);
  opacity: .15;
}
.break {
  display: none;
}
@media all and (max-width: 650px) {
  .image-container {
    margin: 30px;
    outline: solid 20px #eee;
  }
  .break {
    display: initial;
  }
}