CodePen

HTML

            
              <section class="slide-up-boxes">
  <center><table><tr><td>
        <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>
        </td><td>&nbsp;</td><td>  
        <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>
                          </td><td>&nbsp;</td><td>
        <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>

  </td></tr>
  <tr><td style="margin-top:-5px;">
        <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>
        </td><td>&nbsp;</td><td>  
        <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>
                          </td><td>&nbsp;</td><td>
        <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>

  </td></tr></table>
  <table>
  <tr><td>  
        <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>
                          </td><td>&nbsp;</td><td>
        <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>

  </td></tr></table></center>
      </section>
            
          
!
via HTML Inspector

CSS

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

* { margin: 0; padding: 0; }
body { font: 14px Calibri; }

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;
    }

    .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; 
    }
    .slide-up-boxes a:hover div { 
      opacity: 1; 
      -webkit-transform: rotate(0); 
      -moz-transform: rotate(0); 
      -o-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; }

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

JS

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