» » Pure CSS3 to achieve cool mouseover effect

 

Pure CSS3 to achieve cool mouseover effect

Author: bamboo06 on 25-11-2015, 00:50, views: 1831

2
In this paper, without the need to introduce any javascript code that uses only pure CSS3 and HTML to realize cool mouseover effect. When the mouse hovers over the target element, it can achieve a common line change, flip, zoom, slide animation, etc. effect.


HTML
We put a picture in .he_border1, and list caption information.
<div class="box">
	<div class="he_border1">
		<img class="he_border1_img" src="pro_1.jpg" alt="Image 01">
		<div class="he_border1_caption">
			<h3 class="he_border1_caption_h">Goocode.net</h3>
			<p class="he_border1_caption_p">WEB front-end application tutorial + Demo + source</p>
			<a class="he_border1_caption_a" href="http://www.goocode.net/" target="_blank"></a>
		</div>
	</div>
</div>


CSS
We want to achieve the effect that when the mouse into the picture, image zoom, above picture will appear with a transparency mask layer, and appeared four frame animation changes, the final closure of four frames in a square, is displayed in the square in photo caption. This effect is in many pictures station, and is widely used in product list page.
.he_border1{background:#fe7253;width:360px;height:240px;padding:0;margin:0;border:1px solid #000;position:relative;box-sizing:border-box;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} 
.he_border1 .he_border1_img{display:block;width:100%;padding:0;margin:0;position:relative;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;opacity:1;overflow:hidden} 
.he_border1:hover .he_border1_img{position:absolute;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);opacity:.6} 
.he_border1 .he_border1_caption{color:#fff;padding:0;margin:0;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} 
.he_border1 .he_border1_caption::before,.he_border1 .he_border1_caption::after{position:absolute;content:'';opacity:0;-webkit-transition:opacity 0.4s,-webkit-transform .4s;-moz-transition:opacity 0.4s,-moz-transform .4s;-o-transition:opacity 0.4s,-o-transform .4s;transition:opacity 0.4s,transform .4s} 
.he_border1 .he_border1_caption::before{top:8%;right:10%;bottom:8%;left:10%;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);-moz-transform:scale(0,1);-o-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0} 
.he_border1 .he_border1_caption::after{top:8%;right:10%;bottom:8%;left:10%;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);-moz-transform:scale(1,0);-o-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-o-transform-origin:100% 0;transform-origin:100% 0} 
.he_border1:hover .he_border1_caption::before,.he_border1:hover .he_border1_caption::after{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} 
.he_border1 .he_border1_caption,.he_border1 .he_border1_caption > a{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden; z-index:1000} 
.he_border1 .he_border1_caption_h{font-size:1.3em;font-weight:700;text-align:center;width:80%;position:absolute;top:20%;left:10%;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:1} 
.he_border1 .he_border1_caption_p{font-size:1em;text-align:center;width:80%;position:absolute;top:60%;left:10%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden;opacity:0} 
.he_border1:hover .he_border1_caption_p{top:45%;opacity:1} 


The above code takes full advantage of the transform animation property of CSS3, and hover animation effects are fully shown up. Check out the DEMO to see more mouseover effects: zoom, flip, slide and so on.

Category: CSS / HTML5

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
17 December 2017 03:25

Barbara W. McCloud

Reply
  • Group: Guests
  • –†Registered date: --
  • Status:
 
The need to introduce any javascript code that uses only pure CSS3 and HTML to realize cool mouseover effect. When the mouse hovers over the target element. http://www.chinesebuffetnearmenow.net/

<
  • 0 Comments
  • 0 Articles
14 February 2018 03:18

Nicolas

Reply
  • Group: Guests
  • –†Registered date: --
  • Status:
 
Find nail salons: https://bestnailsalonnearme.com/
It is the nail salon website.

Information
Comment on the news site is possible only within (days) days from the date of publication.