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 transitionborder-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 )

body {
    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 )

 <div class=”cr1″>
     <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

Leave a Reply

Your email address will not be published. Required fields are marked *