Create a Hover Effect with CSS3 Transition and Transform Properties

| Coding Tutorials
transition and transform css3

One of our members wanted to reproduce the hover effect from the team's pictures in our About Us page.

In this tutorial, I'm going to show you how to use CSS to get the same result. I'll also show you how to customize the animation.

Step #1. The HTML

Add this sample code in your site:

<div class="block">
    <img title="" alt="" src="/park.jpg">
    <div class="block-caption">
        A nice hidden subtitle goes here
    </div>
</div>

Step #2. The CSS

Load the CSS code below into your site:

.block {
    display: block;
    height: 425px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 640px;
}
.block img {
    transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
}
.block .block-caption {
    background: rgba(0,0,0,0.6);
    bottom: 0;
    color: #fff;
    display: table;
    left: 0;
    opacity: 0;
    padding: 10px 0;
    position: absolute;
    transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    width: 640px;
}
.block:hover .block-caption {
    opacity: 1;
}
.block:hover img {
    transform: scale(1.5) rotateZ(-5deg);
    -moz-transform: scale(1.5) rotateZ(-5deg);
    -webkit-transform: scale(1.5) rotateZ(-5deg);
    -o-transform: scale(1.5) rotateZ(-5deg);
}

Step #3. Customize the CSS

From the previous code, customize some CSS properties based on the following comments:

  • Set your image's width and height.
  • To center the block, use 0 auto as value for margin.

.block {
    height: 425px;
    margin: 0 auto;
    width: 640px;
}

  • Change the transition property for the image and caption based on this tutorial.
  • Use the image's width for the caption.

.block img {
    transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
}
.block .block-caption {
    transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    width: 640px;
}

  • For the transform property we use 4 lines to support different browsers. For more details visit this page.
    • transform: default
    • -webkit-transform: Chrome and Safari
    • -moz-transform: Firefox
    • -o-transform: Opera
  • Change scale() and rotateZ() values to get different animation results. You can use instead rotateY() to modify the direction.

.block:hover img {
    transform: scale(1.5) rotateZ(-5deg);
    -moz-transform: scale(1.5) rotateZ(-5deg);
    -webkit-transform: scale(1.5) rotateZ(-5deg);
    -o-transform: scale(1.5) rotateZ(-5deg);
}

Step #4. The end result

The animation will start when you move the mouse over the image:

hover

View demo


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.