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:
this is fantastic tutorials
Thanks, D!