CS - BOX SLIDES

create the effect of sliding boxes


Tuts Library »

How It's Done

Here’s the HTML. So, I’m an EPL fan.

<section>
   <header class="banner">
   <h2>Live Demo - Box Slides</h2>
   <p><code>Transform</code> & <code>Transition</code> Elements in Action</p>
   </header>
</section>
<section class="project-container">
   <article class="transformition">
      <a href="http://www.liverpoolfc.com">
         <h3>Liverpool FC</h3>
         <p>Formed in 1892; Stadium: Anfield. They started out as a different club name before they became Liverpool</p>
      <a href="http://www.chelseafc.com">
         <h3>Chelsea FC</h3>
         <p>Formed in 1905; Stadium: Stamford Bridge. In 1905, a meeting held at a pub to come up with a team name</p>
      </a>
      <a href="http://www.manutd.com">
         <h3>Manchester United FC</h3>
         <p>Formed in 1878; Stadium: Old Trafford.  The team name Manchester United didn't evolve until 1902</p>
      </a>
      <a href="http://www.saintsfc.co.uk">
         <h3>Southampton FC</h3>
         <p>Formed in 1885; Stadium: St. Mary’s. During World War II, a bomb landed on the stadium, leaving an 18 foot crater</p>
      </a>
   </article>
</section>

Creating the <a> link. The height: element is important

.transformition a {
   height:70px;
   display: block;
   margin: 0 auto 8px;
   text-decoration: none;
   background-color: #fc0;				
   -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.67), 0 0 40px rgba(0, 0, 0, 0.06) inset;
   -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.67), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.67), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
   overflow: hidden;
}

<H3> tag transition setup. Be sure to set the height element to that of it’s parent container

.transformition h3 {
   line-height: 70px; /* set line-height to height of parent container */
   margin: 0px; /* important to set margin for transition */
   color: #242424;
   text-shadow: 2px 1px 5px #ffffff;
   text-align: center;
   
   -webkit-transition: margin-top 0.4s linear;  /* Chrome, Safari */
   -moz-transition: margin-top 0.4s linear;  /* FireFox */
   -o-transition: margin-top 0.4s linear;  /* Opera */
   transition: margin-top 0.4s linear;  /*  IE10 */

}

HINT:

The transition effect does not work in IE9 or below. Because the 'transform' setting is set at '2deg', the 'opacity' must be set to '0' so the underlying image to be transitioned does not show through before hovering

Now we need to setup the transition & transform for element that will be transitioned

.transformition p {
   position: relative;
   font-size: 15px/18px;
   color: #ffffff;
   padding: 3px 5px;
   height: 70px;
   display: inline-block;
   opacity: 0;  /* if other than 0 you may see the underlying image.  not good */

   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* Microsoft Opacity Setting */
   filter: alpha(opacity=0);  /* Microsoft Opacity Setting */

   -webkit-transition:  0.4s linear;  /* Chrome, Safari */
   -moz-transition:  0.4s linear; /* FireFox */
   -o-transition:  0.4s linear;  /* Opera */
   transition:  0.4s linear;  /*  IE10 */
                
   -webkit-transform: rotate(2deg);  /* Chrome, Safari */
   -moz-transform: rotate(2deg); /* FireFox */
   -o-transform: rotate(2deg);  /* Opera */
   transform: rotate(2deg);  /*  IE10 */
}

When we hover on the <H3> tag, we want it to 'slide' up the opposite amount as the height of it's parent container

.transformition a:hover h3 {
   margin-top: -70px;
   opacity: 1; /* I left this at "1" so you could see what is truly happening.  If you set to "0", the h3 tag just disappears */
}

Since the <H3> tag is sliding up, we want the <p> tag to follow. You must set the 'opacity' > 0

.transformition a:hover p {	
   opacity: 1;  /* you want to see the p tag verbiage */
   -webkit-transform: rotate(0deg);  /* The rotation must go back to zero to land the slider horizontally  */
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
}

Now we modify each child of the <a> tag to load the different backgrounds and images

.transformition a:nth-child(1) p {
   background: #b22222 url(../boxslides/liverpool.png) 2px 1px no-repeat; padding-left: 80px;
}
.transformition a:nth-child(2) p {
   background: #367db2 url(../boxslides/chelsea.png) 2px 1px no-repeat; padding-left: 80px;
}
.transformition a:nth-child(3) p {
   background: #228b22 url(../boxslides/manchesterunited.png) 2px 1px no-repeat; padding-left: 80px;
}
.transformition a:nth-child(4) p {
   background: #9400d3 url(../boxslides/southampton.png) 2px 1px no-repeat; padding-left: 80px;
}