Captioned Images

Captioned-Images.markdown

Captioned Images

Images with layered caption states. These widgets live on The Daily Beast homepage. The components are built using Less mixins. The width of each widget can vary based on configuration through a CMS, using a set of manageable classes.

A Pen by Natalie Olivo on CodePen.

License.

index.html

<section class='row'>
  <!-- Captioned Images on 5 grid units -->
  <figure class="captioned-layered-figure grid5">
    <img src="http://f.cl.ly/items/031Z140T1i3A0X1s1G15/parisdaily001.JPG" />
    <figcaption>
      <div class="tb-centered">
        <h3>The Lovely Towers</h3>
        <span class="byline">By Tower Guy</span>
      </div>
    </figcaption>
    <figcaption class="caption-filter">
      <div class="absCentered">
        <h2>The Lovely Towers</h3>
        <span class="byline">By Tower Guy</span>
        <p>
          Paris Eiffel Tower dealers make a fortune. It may be hard to believe at first but the truth is they do. And the proof is in the ...
        </p>
        <a href="/articles/2013/10/15/what-obama-and-rouhani-want-from-geneva.html" class="keep-reading">
          Keep Reading 
          <span class="icon-arrow" aria-hidden="true"></span>
        </a>
      </div>
    </figcaption> 
  </figure>

<!-- Captioned Images on 13 grid units -->
<figure class="captioned-layered-video grid13">
  <img src="http://f.cl.ly/items/293K163C3I0j0F102R1n/433037885_960.jpg" />
  <figcaption>
    <div class="tb-centered">
      <h3>The Quiet City</h3>
      <span class="byline">By Andrew Julian</span>
    </div>
  </figcaption>
  <figcaption class="caption-filter">
    <div class="absCentered">
      <h2>The Quiet City</h3>
      <span class="byline">By Andrew Julian</span>
      <p>
        Claire and I recently took a trip to France, and I filmed this during our time in Paris. Until this trip, I had only ever experienced Paris in the summer and I was struck by just how different the city is when most of us tourist are gone ...
      </p>
      <a href="http://vimeo.com/62959319" class="keep-reading">
      Keep Reading 
      <span class="icon-arrow" aria-hidden="true"></span>
      </a>
    </div>
  </figcaption> 
</figure>
</section>
  
<credits>
  <p>Image Provided By ParisDailyPhoto.com</p>
  <p>Design Provide By the Fabulously Talented Design Team at TDB</p>
  <p>Video From Vimeo</p>
</credits>

<section class='row'>
  <!-- Captioned Images on 5 grid units -->
  <figure class="captioned-layered-figure grid5">
    <img src="http://f.cl.ly/items/311v1k3o3H3r0k1w1c40/2013-12-07-LacherBallon.jpg" />
    <figcaption>
      <div class="tb-centered">
        <h3>Colorful Balloons</h3>
        <span class="byline">By GirlInParis</span>
      </div>
    </figcaption>
    <figcaption class="caption-filter">
      <div class="absCentered">
        <h2>Colorful Balloons</h3>
        <span class="byline">By GirlInParis</span>
        <p>
          Like every 1st of January since 2005, the CDP tradition is to post the best photo of the past year... This year I thought of a recent one that I took at the Eiffel Tower. I know a lot of you liked it toos ...
        </p>
        <a href="http://www.parisdailyphoto.com/" class="keep-reading">
          Keep Reading 
          <span class="icon-arrow" aria-hidden="true"></span>
        </a>
      </div>
    </figcaption> 
  </figure>
  
  <!-- Captioned Images on 8 grid units -->
<figure class="captioned-layered-figure no-image grid8">
  <img src="" />
  <figcaption>
    <div class="tb-centered">
      <h3>The Lovely Towers</h3>
      <span class="byline">By Tower Guy</span>
    </div>
  </figcaption>
  <figcaption class="caption-filter">
    <div class="absCentered">
      <h2>The Lovely Towers</h3>
      <span class="byline">By Tower Guy</span>
      <p>
        Paris Eiffel Tower dealers make a fortune. It may be hard to believe at first but the truth is they do. And the proof is in the ...
      </p>
      <a href="http://www.parisdailyphoto.com/" class="keep-reading">
      Keep Reading 
      <span class="icon-arrow" aria-hidden="true"></span>
      </a>
    </div>
  </figcaption> 
</figure>
  
  <!-- Captioned Images on 5 grid units -->
  <figure class="captioned-layered-figure grid5">
    <img src="http://f.cl.ly/items/260R3x0K0Y0o0G1k1N1D/2014-01-12-WriteBoard.jpg" />
    <figcaption>
      <div class="tb-centered">
        <h3>Write Board in Paris</h3>
        <span class="byline">By GirlInParis</span>
      </div>
    </figcaption>
    <figcaption class="caption-filter">
      <div class="absCentered">
        <h2>White Board In Paris</h3>
        <span class="byline">By GirlInParis</span>
        <p>
          Where does this irrepressible need to write, draw or paint on walls come from? It's hard to tell, but it started a long time ago with the cavemen, who did marvelous things ...
        </p>
        <a href="http://www.parisdailyphoto.com/" class="keep-reading">
          Keep Reading 
          <span class="icon-arrow" aria-hidden="true"></span>
        </a>
      </div>
    </figcaption> 
  </figure>
</section>

<section class="row">
    <!-- Captioned Images on 5 grid units -->
  <figure class="captioned-layered-figure grid5">
    <img src="http://f.cl.ly/items/1M1e0m1G0D1D2k0c0C2T/2013-12-24-ChristmasEve.JPG" />
    <figcaption>
      <div class="tb-centered">
        <h3>Fun Ferris Wheel</h3>
        <span class="byline">By Paris Daily Photo</span>
      </div>
    </figcaption>
    <figcaption class="caption-filter">
      <div class="absCentered">
        <h2>Fun Ferris Wheel</h3>
        <span class="byline">By Paris Daily Photo</span>
        <p>
          Yes, it's a ferris wheel, yes it was installed there especially for Christmas, and no, I did not take this photo in Paris, but in Nice, where I'll be spending Christmas with my family...
        </p>
        <a href="http://www.parisdailyphoto.com/" class="keep-reading">
        Keep Reading 
        <span class="icon-arrow" aria-hidden="true"></span>
        </a>
      </div>
    </figcaption> 
  </figure>
</section>

style.less

/**
UTILS Library 
**/

/** vars **/
@grid5: 300px;
@grid8: 495px;
@grid13: 820px;

/** Type Mixins **/
.captioned-default-header() {
  h3 {
    font-family: arial narrow, sans-serif, helvetica;
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: .25em;
  }  
}
.captioned-filter-header() {
  h2 {
    font-family: arial narrow, sans-serif, helvetica;
    font-size: 2.4em;
    font-weight: bold;
    margin-bottom: .25em;
    color: gold;
  }
}

.caption-text(){
  p {
    font-family: arial narrow, sans-serif, helvetica;
    font-size: 1.4em;
    line-height: 1.2em;
    margin: .75em 0;
  }
}

@font-face {
      font-family: "dailybeasticonfont";
      src: url("http://f.cl.ly/items/3O1T2C1z210c091s2p2s/dailybeast-icon-font.svg");
}

/** Structural MIXINS **/
.max-image-height() {
    height: 600px;
    max-height: 600px;
}

.absCentering() {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  .translate(-50%, -50%);
}
.absDefault(){
  position: absolute;
  left: 0;
  bottom: 0;
}
.absBottom10(){
  position: absolute;
  left: 0;
  bottom: 10%;
}

/** State Change MIXINS (state-change-mixins.less) **/
.translate(@x, @y) {
  -webkit-transform: translate(@x, @y);
  -moz-transform: translate(@x, @y);
  -ms-transform: translate(@x, @y);
}

.transition() {
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -ms-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

/** Component MIXINS (component-mixins.less) **/
.caption-default() {
  figcaption:first-of-type {
    display:table;
    width:200px;
    min-height:180px;
    height:180px;
    padding:0 20px 0 20px;
    color: #fff;
    background: #000;
    .absBottom10;
  }
  figcaption .tb-centered {
    display: table-cell;
    vertical-align: middle;
  }
}
.caption-filter(){
  .caption-filter {
    min-height: 180px;
    height: 100%;
    width: 100%;    
    background: #000;
    background: 0 0 rgba(0,0,0,0.78);
    padding: 22px 20px 22px 20px;
    color: #fff;
    opacity: 0;
    .absDefault;
    .caption-text;
    .absCentered {
      .absCentering;   
    }
    a {
      color: gold;
      font-family: arial narrow, sans-serif, helvetica;
      text-transform: uppercase;
      text-decoration: none;
    }
  }
  .caption-filter:hover {
    opacity: 1;    
  }
  
}

.credits() {
  font-size: .60em;
  line-height: 1.4em;
  width: 92%;
  margin: 0 auto;
  clear: left;
  display: block;
  padding: 6px 10px;
  border-radius: 2px;
  border: solid 1px #aaaaaa;
  color: #aaaaaa;
  font-family: "Arial", "Serif";
}

.play-button() {
  font-family: "dailybeasticonfont";
  &:after {
    font-family: "dailybeasticonfont";
    display: block;
   font-size: 20px;
    content: "\e003";
    position: absolute;
    top:0;
  }
}

/** WIDGET MIXINS **/
.captioned-layered() {
  .max-image-height; 
  text-align: center;
  position: relative;
  overflow: hidden; /* clip image overflow */
  .caption-default;
  .caption-filter;  
}

/* This would live in images.less or captions.less */
.captioned-layered-figure {
  .captioned-default-header;
  .captioned-filter-header;
  .captioned-layered;
  img { height: 600px; }
  float: left;  
  margin: 10px 0 10px 25px;
}

.captioned-layered-video {
  .captioned-default-header;  
  .max-image-height; 
  text-align: center;
  position: relative;
  overflow: hidden; /* clip image overflow */
  .caption-default;
  img { height: 600px; }
  float: left;  
  margin: 10px 0 10px 25px;
}

credits { .credits; }

.captioned-layered-figure.grid5 { width: @grid5; }
.captioned-layered-figure.grid8 { width: @grid8; }

.captioned-layered-video.grid13,
.captioned-layered-figure.grid13 { width: @grid13; }

.captioned-layered-figure.no-image { 
  background: #000; 
  figcaption:first-of-type {
    width: 100%;
    height: 100%;
    bottom: 0;
  }
  .caption-filter {
    background: 0 0 rgba(0,0,0,0.85);
  }
}

.captioned-layered-figure.no-image:hover {
  background: transparent;
}

.captioned-layered-video {
  .play-button;
}

p { clear: both; }

.row {
  margin: 0 auto;
  width: 92%;
}

/***
Caption Hover State
***/
.captioned-layered-video:hover figcaption:first-of-type,
.captioned-layered-figure:hover figcaption:first-of-type {
  opacity: 0;
}