CS - BOX SLIDES

create the effect of sliding boxes


Code Library »

The Finished Project

Using the transform and transition properties, with a little help from the psuedo-element, nth-child, you can create some very cool effects...

How It's Done

Here’s the HTML.

<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;
   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;
    margin: 0px;
    color: #242424;
    text-shadow: 2px 1px 5px #ffffff;
    text-align: center;
    transition: margin-top 0.4s linear;
}

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 3px 80px;
    height: 70px;
    display: inline-block;
    opacity: 0;
    text-align: left;
    transition:  340ms linear;
    transform: rotate(360deg);
    transform-origin: 0% 20%;
}

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

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;
    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;;
}
.transformition a:nth-child(2) p {
   background: #367db2 url(../boxslides/chelsea.png) 2px 1px no-repeat;;
}
.transformition a:nth-child(3) p {
   background: #228b22 url(../boxslides/manchesterunited.png) 2px 1px no-repeat;;
}
.transformition a:nth-child(4) p {
   background: #9400d3 url(../boxslides/southampton.png) 2px 1px no-repeat;
}