Awesome Animated CSS3 Image Hover Effects Text

css-image-hover-effects

Using CSS transition properties to create Awesome Animated CSS3 Image Hover Effects Text. When Mouse hover onto image, text is show animated type display and when mouse focus out automatic animated close back to normal saturation.

 
 

DemoDownload

 
 
Following HTML Code is display first div tag with assign container id have contain of image, size, position. Second div tag with assign img_transition class is use to show real image when effect is work. and last third div tag with assign show-message class is purpose of text style when effect is run.

 


<div id="container">
    <div class="img_transition">
        <div class="show-message">
            Couple Love <br /><br /> 
I Love You... Doesn't Mean Only Those Three Little Words Of Love, It Also Means I Miss You Every Moment When You Are Not Here With Me, It Means I Trust You With All My Heart, It Means I Believe In verything You SayAnd It Also Means I Need You Here For The Rest Of My Life... 
        </div>
    </div>
</div>

 

Set CSS design of every HTML elements with CLASS or ID which are we use. Class property is set in following manner.


#container { 
	width: 540px; 
	height: 320px; 
	background: url(couple.jpg) 0 0 no-repeat;
	border: 1px solid #ccc; 
	position: relative; 		
}

.img_transition { 
	transition-duration: 0.5s; 			/* W3C */	
	-webkit-transition-duration: 0.5s;  /* Google Chrome/Safari Support */
	-moz-transition-duration: 0.5s; 	/* Mozilla Firefox Support */ 
	-o-transition-duration: 0.5s; 		/* Opera Support */
	overflow: hidden;
	height: 0px; 
}

#container:hover .img_transition { 
	height: 115px; 
}

.show-message { 
	transform-origin: top;				/* W3C */
	transition-duration: 0.5s;			/* W3C */	

	-webkit-transform-origin: top;		/* Google Chrome/Safari Support */
	-webkit-transition-duration: 0.5s;	/* Google Chrome/Safari Support */

	-moz-transform-origin: top;			/* Mozilla Firefox Support */
	-moz-transition-duration: 0.5s;		/* Mozilla Firefox Support */

	-o-transform-origin: top; 			/* Opera Support */
	-o-transition-duration: 0.5s;		/* Opera Support */

	font-size: 16px;
	font-family: 'MyriadPro-Light', Arial;		
	font-weight: normal;
	color: #FFF;		
}

#container:hover .show-message { 
	background: rgba(0, 0, 0, 0.5);	
	color: #fff;
	height: 115px;		
	transform: rotateX(0deg); 			/* W3C */	
	-webkit-transform: rotateX(0deg); 	/* Google Chrome/Safari Support */
	-moz-transform: rotateX(0deg); 		/* Mozilla Firefox Support */ 
	-o-transform: rotateX(0deg); 		/* Opera Support */
}

 

Container ID contain for store background image with specific size and position.
img_transition CLASS contain for show real image when effect is work.
show-message CLASS contain for text message styles and last is show-message CLASS when active HOVER effects contain is text effect background color, height of text effect etc..

 
 
Like this article? Subscribe to our RSS feed. New article notification sends you via E-Mail or following social share button to share this article.
 
 

Back to Top
About the Post Writer View all posts by
I'm write of this article and founder of Way2tutorial or Webtuts Web Development Programming blog. My passion is keen on contributing WEB Industry. Mostly I do work on PHP, WordPress, Drupal. I hope you enjoy with this articles. Thanks for reading.

2 Comments Discussion

  1. vimax on May 15, 2013 - Reply to this Comment

    Hiya very nice website!! Man .. Excellent .. Wonderful .. I will bookmark your site and take the feeds also…I am glad to seek out a lot of useful information right here in the put up, we’d like work out more techniques on this regard, thank you for sharing. . . . . .

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>