A Pen by Chris Violette.

A-Pen-by-Chris-Violette.markdown

A Pen by Chris Violette

A Pen by Chris Violette on CodePen.

License.

index.html

<div id="container">
  <div class="item">
    <label>
      <div class="stage">
        <img src="http://placehold.it/
250x250/123/ffffff&text=1">
        <div class="mini-deets">
          Lorem ipsum dolor sit amet
        </div>
      </div>
      <input type="radio" name="deets">
      <div class="deets-stage"><div class="deets">
        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#" class="close-deets">Close</a></p>
      </div></div>
    </label>
  </div>
  <div class="item">
    <label>
      <div class="stage">
        <img src="http://placehold.it/
250x250/321/ffffff&text=2">
        <div class="mini-deets">
          Lorem ipsum dolor sit amet
        </div>
      </div>
      <input type="radio" name="deets">
      <div class="deets-stage"><div class="deets">
        <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div></div>
    </label>
  </div>
  <div class="item">
    <label>
      <div class="stage">
        <img src="http://placehold.it/
250x250/132/ffffff&text=3">
        <div class="mini-deets">
          Lorem ipsum dolor sit amet
        </div>
      </div>
      <input type="radio" name="deets">
      <div class="deets-stage"><div class="deets">
        <p>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div></div>
    </label>
  </div>
  <div class="item">
    <label>
      <div class="stage">
        <img src="http://placehold.it/
250x250/312/ffffff&text=4">
        <div class="mini-deets">
          Lorem ipsum dolor sit amet
        </div>
      </div>
      <input type="radio" name="deets">
      <div class="deets-stage"><div class="deets">
        <p>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div></div>
    </label>
  </div>
  <div class="item">
    <label>
      <div class="stage">
        <img src="http://placehold.it/
250x250/213/ffffff&text=5">
        <div class="mini-deets">
          Lorem ipsum dolor sit amet
        </div>
      </div>
      <input type="radio" name="deets">
      <div class="deets-stage"><div class="deets">
        <p>5 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div></div>
    </label>
  </div>
  <div class="item">
    <label>
      <div class="stage">
        <img src="http://placehold.it/
250x250/231/ffffff&text=6">
        <div class="mini-deets">
          Lorem ipsum dolor sit amet
        </div>
      </div>
      <input type="radio" name="deets">
      <div class="deets-stage"><div class="deets">
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p><p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div></div>
    </label>
  </div>
</div>

script.js

$(function(){
  function closeDeets(){
    $('.item input').removeAttr('checked');
  }
  
  $('.deets-stage').click(function(e){
    e.preventDefault();
    if(e.target == this){
      closeDeets();
    }
  });
  
  $('.close-deets').click(function(e){
    e.preventDefault();
    closeDeets();
  })
});

style.scss

@import "compass";
*{
  box-sizing: border-box;
  @include backface-visibility(hidden);
}

body {
  background: #DDD;
}

#container {
  width: 85%;
  margin: 20px auto;
}

.item {
  display: block;
  width: 25%;
  float: left;
  margin: 0;
  padding: 0;
  
  @media (max-width: 600px) {
    width: 33.33%;
  }
  
  @media (max-width: 481px) {
    width: 50%;
  }
  
  label {
    display: block;
    margin: 0;
  }
  
  .stage {
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  
  img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .mini-deets {
    padding: 0.5em;
    position: absolute;
    z-index: 2;
    top: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(#000, 0.5);
    color: #FFF;
    @include transition(all 0.15s ease-out);
  }
  
  input {
    position: absolute;
    top: -100px;
    left: -100px;
    opacity: 0;
  }
  
  .deets, .deets-stage {
    display: none;
    @include transition(all 0.15s ease-out);
  }
  
  &:hover {
    .mini-deets {
      top: 50%;
    }
  }
  
  input:checked {
    ~ .deets-stage {
      display: block;
      position: fixed;
      z-index: 9;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(#000, 0.5);
      
      .deets {
        display: block;
        position: fixed;
        overflow: auto;
        z-index: 10;
        top: 10%;
        right: 25%;
        left: 25%;
        bottom: 10%;
        padding: 1em;
        background: rgba(#FFF, 1);
        @include border-radius(0.25em);
      }
    }
  }
}

#container:hover {
  > .item {
    
    &:hover {
      
    }
  }
}