Membuat Circle Image Galeri
Three nice different image gallery hover effect using basic CSS3 properties like transition, border-radius, and box-shadow. You can use these on an image gallery on your website or some single images too.1. Login Your Account Blogger2. Go To Edit Html3. Search Code ]]></b:skin>4. Put the following code right above the code ]]> </ b: skin> ( DIATAS ) body { […]
Three nice different image gallery hover effect using basic CSS3 properties like transition, border-radius, and box-shadow. You can use these on an image gallery on your website or some single images too.
1. Login Your Account Blogger
2. Go To Edit Html
3. Search Code ]]></b:skin>
4. Put the following code right above the code ]]> </ b: skin> ( DIATAS )
margin: 0;
padding: 0px;
font-size: 13px;
font-family: Verdana;
color: #333;
width: 1200px;
}
div.cr1 {
display: none;
width: 300px;
height: 300px;
border-radius: 400px;
background: #aaa;
text-align: center;
border-top: 10px groove #999;
border-right: 50px groove #999;
border-left: 50px groove #999;
border-bottom: 10px groove #999;
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 30px 30px rgba(255, 255, 255, 0.3), inset 0 -30px 30px rgba(255, 255, 255, 0.3), inset 0 2px 3px rgba(255, 255, 255, 0.7), inset 0 -20px 5px rgba(255, 255, 255, 0.3);
}
div.cr1 p {
font-size: 2em;
font-weight: bold;
line-height: 260px;
}
figure {
float: left;
width: 300px;
height: 300px;
border-radius: 200px;
box-shadow: inset 0 40px 50px rgba(0, 0, 0, 0.2), inset 0 -40px 50px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px rgba(0, 0, 0, 0.3), 0 0 3px 1px rgba(0, 0, 0, 0.2);
border: 5px solid #fff;
}
.animate {
transition-property: width, height, border-radius;
transition-duration: 500ms;
-webkit-transition-property: width, height, border-radius;
-webkit-transition-duration: 500ms;
-moz-transition-property: width, height, border-radius;
-moz-transition-duration: 500ms;
-o-transition-property: width, height, border-radius;
-o-transition-duration: 500ms;
}
.animate:hover {
width: 500px;
height: 500px;
border-radius: 300px;
}
figure:hover {
cursor: pointer;
box-shadow: inset 0 50px 30px rgba(0, 0, 0, 0), inset 0 -50px 30px rgba(0, 0, 0, 0), inset 0 0 3px 1px rgba(0, 0, 0, 0.3), 0 0 3px 1px rgba(0, 0, 0, 0.2);
}
figure:active { }
figure.a { background: url(‘http://explosivelab.altervista.org/Nerdz/img/wallpaper2.jpg‘) center center }
figure.b { background: url(‘http://explosivelab.altervista.org/Nerdz/img/futurama2.jpg‘) center center }
figure.c { background: url(‘http://explosivelab.altervista.org/Nerdz/img/futurama1.jpg‘) center center }
figcaption p { display: none }
figure:hover p,
figure p.on {
padding: 2px;
height: 20px;
display: block;
text-align: center;
background: #fff;
margin-top: 45%;
font-weight: bold;
font-size: 1.3em;
color: #666;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
5. Then place the following code to your desired place
( Lalu letakkan kode dibawah ini ditempat yang anda inginkan )
<p>Only Css3 Design.</p>
</div>
<figure class=”a animate”>
<figcaption><p>WAR!</p></figcaption>
</figure>
<figure class=”b”>
<figcaption><p>Bender Evolution</p></figcaption>
</figure>
<figure class=”c”>
<figcaption><p class=”on”>Planet Express</p></figcaption>
</figure>
6. Finish
Note :
Inggris : Replace the red text with your own image, and Replace green text with your own words
Indonesia : Ganti text berwarna merah dengan gambar anda sendiri, dan Ganti Text Berwarna hijau dengan text anda sendiri
Thanks, Do not forget to comment
Credit : Hasbi Blog