Diary Princess Stuff Friends F.A.Q. Request

Cara membuat rules hover diatas Cbox




KONNICHIWA!
Hari ini Aku dapet ide dari k Savira blogwalking untuk mencari ide postingan di hari bosenku ini...!
Thanks k untuk idenya <3, jadi hari ini aku mau ngeposting again so langsung aja..!!!
Kode:
<style>
.container {
    position: relative;
    text-align: center;
    color: white;
}
.topper{
    border-top-left-radius:135px;
    border-top-right-radius:135px;
    padding: 3px;
    background: #fff;
    border-bottom: 0;
    margin-bottom:-15px;
    opacity:1px;
    -webkit-transition:.5s;}
.topper:hover {
    opacity:0px;
    -webkit-transition:.5s;}
.centered {
    position: absolute;
    -webkit-transition:.5s;
    top:2%;
    left:8%;
    opacity:0;
    font-size:15px;
    text-align:center;
    border-top-left-radius:135px;
    border-top-right-radius:135px;
    padding:3px;
    color:#ff6b97;
    background:#fff;
    width:200px;
    height:200px;
}
.centered:hover {
    -webkit-transition:.5s;
    opacity:1;}
</style>
<div class="container">
  <center><img class="topper" img width="200px" src="URL GAMBAR"/>
  <div class="centered"><br/><b>Rules:<br/>1. blah blah.<br/>2. blah blah.<br/>3. blah blah.</b></div></center></div>
Red: radius border
Blue: font size
Green: text color
Purple: tinggi dan lebar
Pink: Url
Aqua: text

Thanks for reading~ hope you enjoy my post!

6 komentar:

  1. maryam, tutorial ini bisa buat cbox model baru enggak?

    BalasHapus
  2. Woah, makasih banyak, Maryam! >v< Udah coba, tapi belum pasang gambarnya, wkwk. :"D Hihi, sukak! <3 <3

    BalasHapus
    Balasan
    1. masama k >.< kenapa gak nanya aja ^^

      Hapus