Simple CSS3 Transitions

If any of you have take a look at my portfolio lately, you may have noticed something new. If you haven’t noticed something new, or just haven’t looked at all, I encourage you to take a look at the portfolio page now. When you hover over one of the portfolio pieces do you see how the work title fades into a different background and font color? This was made possible with the help of CSS3 transitions.

You can do TONS of things with CSS3 transitions: you can change colors, heights, widths, position, shape, opacity, and more! If used effectively (don’t oversaturate your website with them) you can make your website more dynamic, interactive, and memorable.

Here’s a simple step-by-step tutorial on how I added CSS3 transitions to my portfolio to create a simple fade effect, but it’s easy to change these attributes to fit what you need for your own project.

  1. First, have your HTML elements set up: You can’t do any transitions if there’s nothing to transition! This is the setup I have for my code:

    <div class=”portfolio”>
    <a href=”#”><img src=”image.jpg” /><span class=”workTitle”>Work Title</span></a>
    </div>


    In case you can’t tell what’s going on, here’s the run down. I have an image (<img>) and a span tag (<span>) with the class of “workTitle” that present my portfolio piece thumbnail and my portfolio piece title. These two elements are encompassed within an anchor tag (<a>) which links the visitor to that portfolio piece’s individual page. All of this is finally encompassed within a div tag (<div>) that has the class of “portfolio”.

    Note: If you don’t know what these tags are, or what classes are, I highly recommend looking up some HTML tutorials before you continue.

     

  2. Style your HTML elements: There needs to be a starting point for our HTML elements; they need to have some basic styling that will serve as their “default” state. Since we’ll be changing our work title’s background and font colors, this <span> tag MUST have these styles already set. We’re going to set the background color to aqua and the font color to a dark gray:

    .workTitle {
    background: rgb(116, 204, 209);
    color: rgb(51, 51, 51);
    }


     

  3. Add your hover styles: We want the work title to change colors when the user hovers over the portfolio piece. This is a little bit tricky, because we want one element to change (the <span class=”workTitle”> tag) when we hover over another element (the <div class=”portfolio”> tag). Normally when you create hover-based transitions you’re changing the specific element you’re hovering over—in this example that would mean we change the <span> tag when hovering over the <span> tag specifically—but in this case that would mean the visitor HAS to hover over the work title for it to change. We want to be able to have the work title change colors even when the user is hovering over the image as well. Therefore we must target the <div class=”portfolio”> tag. In order to do that, here is the code we’ll be using:

    .portfolio:hover .workTitle {
    background: rgb(38, 38, 38);
    color: #FFF;
    }


    Basically we’re telling the browser that when the user hovers over the tag with the class of “portfolio” (our <div> tag), we want the background color and font color to change to these colors for the tag with the class of “workTitle” (our <span> tag).

     

  4. Add your transition: Now comes the fun part, adding your transition! The transition will be affecting our work title, so we must add the CSS3 style to the <span> tag with the class of “workTitle”:

    .workTitle {
    background: rgb(116, 204, 209);
    color: rgb(51, 51, 51);
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    }


    So what are we looking at? In order to make a transition we must call the transition property. The syntax of this property is as follows: style property > duration > timing. In this example, I am targeting the background property and I want it to change over 0.3 seconds with a timing of ease-in-out (this means it will have a slow start and slow end, speeding up in the middle). You can change these attributes to whatever makes sense for your project. You can change the duration to last for 120 seconds (I wouldn’t recommend it though) or you could change the timing to ease, linear, ease-in, ease-out, etc.

And you’re done! You now have a beautiful transition that will make your website more visually interesting. You can change most any step in this tutorial to make it work for your website, but be careful: do NOT overuse transitions! Using transitions sparingly is much more effective than using it everywhere you possibly can.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s