Hy guys. To day I’m going to show you who you can create some beautiful slide boxes using only CSS 3. So you want to add on your site something similar with my boxes in the footer of my site than all you have to do is to follow this tutorial and hope that in the end you will end up with something like my footer.

Before you dive in I encourage you to follow this tutorial using a new file (.html) and not to modify directly (copy/paste) the code I will show in your theme footer.

So first let’s create the HTML markup for out boxes. In this example i will use only three boxes. So the HTML code for this will look like this:

  
  
I am a moderator on...
Eelegant themes are best resource for wordpress premium themes. If you want your site to have a slick look this is the place
Curently i'm working on...
This project includes a lot of wordpress customization and integration of BuddyPress.
I'm supporting...
If you want your phone to be unique then you must visit mobstermobiledesign.com.

as you can see our boxes are actually links. now let’s create our css, where all the magic is happening. The css part for this will look something like this:

  
  .slide-up-boxes a {
    display: block;
    height: 130px;
    margin: 0 0 20px 0;
    background: rgba(215, 215, 215, 0.5);
    border: 1px solid #ccc;
    height: 65px;
    overflow: hidden;
  }
  .slide-up-boxes h5 {
    color: #333;
    text-align: center;
    height: 65px;
    font: italic 18px/65px Georgia, Serif;
    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: -65px;
    opacity: 0;
  }
  .slide-up-boxes div {
    position: relative;
    color: white;
    font: 12px/15px Georgia, Serif;
    height: 45px;
    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(images/elegant-themes-i-do.png) 17px 17px no-repeat; padding-left: 120px; }
  .slide-up-boxes a:nth-child(2) div { background: #367db2 url(images/wedding-tweets-i-do.png) 21px 10px no-repeat; padding-left: 90px; }
  .slide-up-boxes a:nth-child(3) div { background: #393838 url(images/mobile-i-do.png) 14px 16px no-repeat; padding-left: 133px; }
  

if you want to use this on your wordpress theme just paste the css code on your bottom of style.css. Make sure to create your images. In my example i have free images: elegant-themes-i-do.png, wedding-tweets-i-do.png and mobile-i-do.png. These images i’ve uploaded them to my images folder inside my theme folder.

About author

Young and dedicated fellow, which has playing with WordPress for 5 years now, likes everything about web design and web development.

View all author posts →

Share This