CodePen

HTML

            
              <section class="slide-up-boxes three-three">
  
  <a href="#">
    <h5>2006-2007 5.9L Cummins</h5>
    <div style="background: #c73b1b url(http://imagehost.vendio.com/a/35153648/view/59ldodgecummins.jpg) no-repeat; padding-left: 120px;"></div>        
  </a>
  
  <a href="#">
    <h5>2007.5-2009 6.7L Cummins</h5>
    <div style="background: #367db2 url(http://imagehost.vendio.com/a/35153648/view/67ldodgecummins.jpg) no-repeat; padding-left: 90px;"></div>       
  </a>
  
  <a href="#">
    <h5>2010-2012 6.7L Cummins</h5>
    <div style="background: #393838 url(http://imagehost.vendio.com/a/35153648/view/67ldodgecumminscc.jpg) no-repeat; padding-left: 133px;"></div>        
  </a>
</section>   
<section class="slide-up-boxes three-three">   
  <a href="#">
    <h5>2003-2007 6.0L Powerstroke</h5>
    <div style="background: #c73b1b url(http://imagehost.vendio.com/a/35153648/view/60lpowerstroke.jpg) no-repeat; padding-left: 120px;"></div>       
  </a>
  
  <a href="#">
    <h5>2008-2010 6.4L Powerstroke</h5>
    <div style="background: #367db2 url(http://imagehost.vendio.com/a/35153648/view/60lpowerstroke.jpg) no-repeat; padding-left: 90px;"></div>        
  </a>
  
  <a href="#">
    <h5>2011-2012 6.7L Powerstroke</h5>
    <div style="background: #393838 url(http://imagehost.vendio.com/a/35153648/view/60lpowerstroke.jpg) no-repeat; padding-left: 133px;"></div>       
  </a>
</section>
<section class="slide-up-boxes two-two">
  <a href="#">
    <h5>2008-2010 6.6L Duramax LMM</h5>
    <div style="background: #367db2 url(http://imagehost.vendio.com/a/35153648/view/66lduramax.jpg) no-repeat; padding-left: 90px;"></div>        
  </a>
  
  <a href="#">
    <h5>2011-2013 6.6L Duramax LML/LGH</h5>
    <div style="background: #393838 url(http://imagehost.vendio.com/a/35153648/view/66gmduramaxlgh.jpg) no-repeat; padding-left: 133px;"></div>       
  </a>
  
</section>

            
          
!

CSS

            
              
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/

* { 
  margin: 0; 
  padding: 0;
  box-sizing:border-box;

}

body {
  font: 14px Calibri;
  padding-top:10px; /* fist for some space */
}

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap { width: 370px; margin: 60px auto; }

h1 { font: 32px Helvetica, Arial, Sans-Serif; margin: 0 0 20px 0; }
p { margin: 0 0 20px 0; }
a { text-decoration: none; }

.slide-up-boxes a { 
  display: block; 
  height: 130px; 
  width: 350px; 
  margin: 0 0 20px 0; 
  background: rgba(215, 215, 215, 0.5); 
  border: 1px solid #ccc; 
  height: 85px; 
  overflow: hidden; 
}

.slide-up-boxes h5 { 
  color: #333; 
  text-align: center;
  height: 85px;
  font: italic 18px/85px Calibri;    /* Vertically center text by making line height equal to height */
  opacity: 1;
  -webkit-transition: all 0.2s linear; 
  -moz-transition: all 0.2s linear; 
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.slide-up-boxes a:hover h5 { 
  margin-top: -85px; 
  opacity: 0; 
}

.slide-up-boxes div { 
  position: relative; 
  color: ; 
  font: 12px/15px Calibri;
  height: 65px; 
  padding: 10px; 
  opacity: 0; 
  -webkit-transform: rotate(6deg); 
  -webkit-transition: all 0.4s linear; 
  -moz-transform: rotate(6deg); 
  -moz-transition: all 0.4s linear; 
  -o-transform: rotate(6deg); 
  -o-transition: all 0.4s linear; 
  transform: rotate(6deg); 
  transition: all 0.4s linear; 
}
.slide-up-boxes a:hover div { 
  opacity: 1; 
  -webkit-transform: rotate(0); 
  -moz-transform: rotate(0); 
  -o-transform: rotate(0); 
  transform: rotate(0);
}
.slide-up-boxes a:nth-child(1) div { background: #c73b1b url(http://imagehost.vendio.com/a/35153648/view/59ldodgecummins.jpg) no-repeat; padding-left: 120px; }
.slide-up-boxes a:nth-child(2) div { background: #367db2 url(http://imagehost.vendio.com/a/35153648/view/67ldodgecummins.jpg) no-repeat; padding-left: 90px; }
.slide-up-boxes a:nth-child(3) div { background: #393838 url(http://imagehost.vendio.com/a/35153648/view/67ldodgecumminscc.jpg) no-repeat; padding-left: 133px; }

section {
  overflow:hidden; /* quick clearfix */
}
.three-three, .two-two {
  width: 1070px; /* 350 *3 + 10px margin in between */
  margin: 0 auto;
}

.three-three a,
.two-two a {
  float:left;
}

.three-three a {
  margin-right:10px; /* adds the 10px margin between */
}

.three-three a:last-of-type {
  margin-right:0px; /* removes right margin from the last item */
}

.two-two a {
  margin-right:10px; /* adds the 10px margin between */
  margin-left: 180px; /* ssplits the left margin left over */
}

.two-two a:last-of-type {
  margin-left:0px; /* removes left margin from the last item */
}



            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................