Responsive Accordion (Background Images)

index.html

<h1>Responsive Accordion</h1>
<div class="accordion">
  <ul>
    <li>
      <div>
        <a href="#">
          <h2>Lorem Ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </a>
      </div>
    </li>
    <li>
      <div>
        <a href="#">
          <h2>Lorem Ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </a>
      </div>
    </li>
    <li>
      <div>
        <a href="#">
          <h2>Lorem Ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </a>
      </div>
    </li>
    <li>
      <div>
        <a href="#">
          <h2>Lorem Ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </a>
      </div>
    </li>
    <li>
      <div>
        <a href="#">
          <h2>Lorem Ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </a>
      </div>
    </li>
    <li>
      <div>
        <a href="#">
          <h2>Lorem Ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </a>
      </div>
    </li>
  </ul>
</div>
<p class="about">
  By <a href="http://michaelferry.com/">Michael Ferry</a>
</p>

Responsive-Accordion-(Background-Images).markdown

Responsive Accordion (Background Images)

A Pen by Michael Ferry on CodePen.

License.

style.scss

// Fonts
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Montserrat:700);

// Accordion Height
$a-height: 250px;

// Position text along bottom
$text-offset: $a-height - 90;

// Page Title
h1 {
  
  text-align:center;
  font-family:Montserrat,sans-serif;
  color:#333;

}

.accordion {

  width:100%;
  max-width:1080px;
  height:$a-height;
  overflow:hidden;
  margin:50px auto;

  ul {

    width:100%;
    display:table;
    table-layout:fixed;
    margin:0;
    padding:0;

    li {

      display:table-cell;
      vertical-align:bottom;
      position: relative;
      width:16.666%; // 6 into 100
      height:$a-height;

      background-repeat:no-repeat;
      background-position:center center;

      transition:all 500ms ease;

      div {
        
        display:block;
        overflow:hidden;
        width:100%;

        a {
          
          display:block;
          height:$a-height;
          width:100%;

          position:relative;
          z-index:3;
          vertical-align:bottom;
          padding:15px 20px;
          box-sizing:border-box;
          color:#fff;
          text-decoration:none;
          font-family:Open Sans, sans-serif;
          
          transition:all 200ms ease;

          * {

            opacity:0;
            margin:0;
            width:100%;
            text-overflow:ellipsis;
            position:relative;
            z-index:5;
            
            white-space:nowrap;
            overflow:hidden;
            
            -webkit-transform:translateX(-20px);
            transform:translateX(-20px);

            -webkit-transition:all 400ms ease;
            transition:all 400ms ease;

          }

          h2 {

            font-family:Montserrat,sans-serif;
            text-overflow:clip;
            font-size:24px;
            text-transform:uppercase;
            margin-bottom:2px;
            
            top:$text-offset;

          }
          
          p {
            
            top:$text-offset;
            font-size:13.5px;
            
          }

        }

      }

    }
    
    // Background images
    li:nth-child(1) { background-image:url('http://michaelferry.com/assets/accordion1.jpg'); }
    li:nth-child(2) { background-image:url('http://michaelferry.com/assets/accordion2.jpg'); }
    li:nth-child(3) { background-image:url('http://michaelferry.com/assets/accordion3.jpg'); }
    li:nth-child(4) { background-image:url('http://michaelferry.com/assets/accordion4.jpg'); }
    li:nth-child(5) { background-image:url('http://michaelferry.com/assets/accordion5.jpg'); }
    li:nth-child(6) { background-image:url('http://michaelferry.com/assets/accordion6.jpg'); }

    &:hover li { width:8%; }

    &:hover li:hover {

      width:60%;

      a {
        
        background:rgba(0,0,0,.4);
        
        * {
          
          opacity:1;
          -webkit-transform:translateX(0);
          transform:translateX(0);
        
        }
      
      }

    }

  }

}

// Stack items
@media screen and (max-width: 600px) {
  
  // IE gets fussy if this isn't here
  body { margin:0; }
  
  .accordion {
    
    height:auto;
    
    ul,ul:hover {
      
      li,li:hover {
        
        position:relative;
        display:table;
        table-layout:fixed;
        width:100%;
        
        -webkit-transition:none;
        transition:none;
        
      }
      
    }
    
  }

}

.about {
  
  text-align:center;
  font-family:'Open Sans', sans-serif;
  font-size:12px;
  color:#666;
  
  a {
    
    color:blue;
    text-decoration:none;
    
    &:hover { text-decoration:underline; }
    
  }
  
}