» » Pure CSS3 to achieve cool mouseover effect

 

Pure CSS3 to achieve cool mouseover effect

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

3
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
3 December 2017 14:31

hoowei

Reply
  • Group: Guests
  • –†Registered date: --
  • Status:
 
Fossil rolex replica sale ranges normally Stella Watches, so you'd better have all these done at the time when you purchase the Rolex watch. One among the most sought after models of hublot replica sale is the Bubbleback. A few other thing you should to note when buying pre-owned tiles is the warrantee. Triplock Crown Seal this pertains to the owners or else future owners related with the fake rolex sale. The reason just for this is in which it the bezel setting is so distinctive that snagging the replica watches sale that are on the follow along on clothing or other fabrics is not possible. In order to find out related to dreplica watches uk disengagement theory, theories, depression treatment, get rid of depression, depressive disorders replica watches sale and other information.

<
  • 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.