Kali ini saya akan share bagaimana caranya membuat gambar / foto saat di hover dengan mouse akan membesar.
Berikut ini syntaxnya.
__________________________________________________________________
<html class=" -webkit-"><head>
<title>Rounded Image Links with an Animated Hover Effect</title>
<meta content="css3, transition, link, scale" name="keywords">
<meta content="What the title says, yo!" name="description">
<style>
body {
background-color: #CCC;
padding: 25px;
}
#container li {
display: inline-block;
list-style-type: none;
margin: 20px;
}
/* center the background image */
#container li a {
background-repeat: no-repeat;
background-position: center center;
display: block;
}
/* define the circle and fall under the image */
#container li a span {
border-radius: 100%;
display: block;
position: relative;
z-index: -1;
width: 100px;
height: 100px;
transition: -webkit-transform .15s cubic-bezier(.11,.65,1,1.69);
}
/* the icons */
#container li a.book {
background-image: url("http://www.kirupa.com/mini_icons/entypo/large_book.png");
}
#container li a.rocket {
background-image: url("http://www.kirupa.com/mini_icons/entypo/large_rocket.png");
}
#container li a.link {
background-image: url("http://www.kirupa.com/mini_icons/entypo/large_link.png");
}
/* the "circle" color */
#container li a.book span {
background-color: #7AFF4D;
}
#container li a.rocket span {
background-color: #FFC926;
}
#container li a.link span {
background-color: #FFFFFF;
}
#container li a:hover span {
-webkit-transform: scale(1.3);
}
</style>
</head>
<body cz-shortcut-listen="true">
<div>
<ul id="container">
<li>
<a class="book" href="#">
<span></span>
</a>
</li>
<li>
<a class="rocket" href="#">
<span></span>
</a>
</li>
<li>
<a class="link" href="#">
<span></span>
</a>
</li>
</ul>
</div>
</body></html>
__________________________________________________________________
Semoga bermanfaat.
Referensi : www.kirupa.com
http://pangeran-it.blogspot.com/
Cara buat efek membesar saat di hover pada gambar berbentuk lingkaran
![Cara buat efek membesar saat di hover pada gambar berbentuk lingkaran]()
Reviewed by Syawaluddin Amin, S.Kom
on
April 23, 2014
Rating:
![Cara mengatasi error microsoft excel style 'comma [0]' not found](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFi0vZX0Si_GfPTRMx9sV-xbrBAfxPv3hwRBnI_wXXHpVWuLXE-OEbztMvyCJDcn1Lt9iCfluqm2_q_cviCxFKjHMj6DgyTzYgzF5pFB_McNqh-vQuKZAVenkPpYa23kOvNlivVY7LjgU/s72-w618-c-h323/Screenshot_0.png "Cara mengatasi error microsoft excel style 'comma [0]' not found")
Tidak ada komentar: