Create a Hover Effect with CSS3 Transition and Transform Properties

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

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
D mohsan
D mohsan
3 years ago

this is fantastic tutorials 

Mikall Hill
3 years ago
Reply to  D mohsan

Thanks, D!

2
0
Would love your thoughts, please comment.x
()
x