Create a Hover Effect with CSS3 Transition and Transform Properties

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

• If you’re using Joomla, you can use an extension to add the CSS.
• For WordPress, there is a plugin.
• For Drupal, add it in one of the CSS files from /sites/all/themes/your-theme/css/

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:

View demo