iDevie
July 2020
M T W T F S S
« Jun    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Categories


This tutorial will show how simple it is to achieve simple animation mouse hover using CSS3. We use transitions and animations css properties to achieve some of the interactive animation.

1. Simple image popup effect using pure CSS3

*{margin:0;padding:0;}
body{margin-top:80px;font-size:12px;font-family:arial,sans-serif;color:#9C9C91;background:#fff;}
a {color:#333;text-decoration: none;}
a:hover   {color:#f00;}
.wrap {width:720px;background:#f2f2f2;margin:0 auto;}
ul.works {list-style:none;margin:0;padding:0;}
ul.works li   {float:left;display: inline;margin:0 20px 20px 0;width:158px;height:150px;}
ul.works li a {text-decoration: none;display:block;width:158px;height:150px;background:#fff;}
ul.works li a img {width:150px;height:140px;border:0;}
ul.works li a .imgthumb {position:relative;background:#EFEFEF;}
ul.works li a .imgthumb span.thumb_shadow_right {position:relative;top:-3px;left:-3px;display:block;border:1px solid #BCBEC0;background:#FFF;padding:3px;text-align:center;}
ul.works li a .intro   {display:none;margin-top:5px;height:80px;color:#9C9C91;line-height:1.5;}
ul.works li a .intro p {border-bottom:1px solid #DEDEDD;overflow:hidden;}
ul.works li a:hover {position:absolute;z-index:5;margin:-60px -6px -220px -30px;width:210px;height:273px;background:#CFE798;cursor:pointer;}
ul.works li a:hover .shadow {position:relative;display:block;padding:4px;}
ul.works li a:hover .box    {border:1px solid #9FCF30;background:#fff;padding:15px 10px 15px 15px;}
ul.works li a:hover .intro  {display:block;}

 

<div>
	<ul>
		<li><a href="#"><div><div><div><span><img src="image2.jpg" /></span></div><div><p>Some text</p><p>Some more text</p><p>Added more text</p><p>Demo Text: 2008.03</p></div></div></div></a></li>
		<li><a href="#"><div><div><div><span><img src="image3.jpg" /></span></div><div><p>Some text</p><p>Some more text</p><p>Added more text</p><p>Demo Text: 2008.03</p></div></div></div></a></li>
		<li><a href="#"><div><div><div><span><img src="image4.jpg" /></span></div><div><p>Some text</p><p>Some more text</p><p>Added more text</p><p>Demo Text: 2008.03</p></div></div></div></a></li>
		<li><a href="#"><div><div><div><span><img src="image5.jpg" /></span></div><div><p>Some text</p><p>Some more text</p><p>Added more text</p><p>Demo Text: 2008.03</p></div></div></div></a></li>
	</ul>
 </div>

 

2. Icon hover effect

Screen Shot 2013-08-08 at 7.21.03 PM

First lets prepare our div section which has all the links.

<div>
       <a href="#"> Mobile </a> 
       <a href="#"> Desktop </a> 
       <a href="#"> Partners </a> 
       <a href="#"> Support </a> 
       <a href="#"> Security </a>
</div>

 

Now the animation part

. Hi-icon-Effect-6. Hi-icon { 
    Box-Shadow: 0 0 0 4px RGBA (255,255,255,1); 
    Transition: background 0.2s, 0.2s Color;     
}
. No-Touch. Hi-icon-Effect-6. Hi-icon: hover { 
    background: RGBA (255,255,255,1); 
    Color: # 64bb5d; 
}
. No-Touch. Hi-icon-Effect-6. Hi-icon: hover: before { 
    Animation: spinAround 2S Linear infinite; 
}
@ Keyframes spinAround { 
    from { 
        transform: Rotate (0deg) 
    } 
    to { 
        transform: Rotate (360deg); 
    } 
}

 

make sure you download all the fonts before implementing this code.


Comments 0
There are currently no comments.