Grey Gurl

Jumat, 15 Agustus 2014 - 0 LIGHT(S)

Membuat Image di 'Meet The Owner'

Judulnya agak memusingkan bukan?

. Kalau pusing, ini previewnya:

Mau begitu? Copy code di bawah ini.

<div class="sidebar"> <style>.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; }
.ch-info-wrap, .ch-info{ position: absolute; width: 280px; height: 280px; border-radius: 50%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px; }
.ch-info-wrap { top: 20px; left: 20px; box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); }
.ch-info { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; }
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
.ch-info .ch-info-front { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; z-index: 100; box-shadow: inset 2px 1px 4px rgba(0,0,0,0.1); }
.ch-info .ch-info-back { background: rgba(230,132,107,0); }
.ch-img-1 { background-image: url(Imagenya, seperti aku, aku yang gambar anime); }
.ch-item:hover .ch-info-front { -webkit-transform: rotate3d(1,0,0,-180deg); -moz-transform: rotate3d(1,0,0,-180deg); -o-transform: rotate3d(1,0,0,-180deg); -ms-transform: rotate3d(1,0,0,-180deg); transform: rotate3d(1,0,0,-180deg); box-shadow: inset 0 0 5px rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3); }
.ch-item:hover .ch-info-back { background:#F0ECE6; }
.ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; }
.ch-grid:after, .ch-item:before { content: ''; display: table; }
.ch-grid:after { clear: both; }
.ch-grid li { width: 320px; height: 320px; display: inline-block; margin: 20px; }
</style>
<ul class="ch-grid"> <li><div class="ch-item ch-img-1"> <div class="ch-info-wrap"> <div class="ch-info"> <div class="ch-info-front ch-img-1"> </div> <div class="ch-info-back"> <center><div style="background: url(Url Background mu jika dihover); border-radius: 10px; height: 170px; margin-top: 60px; overflow-x: hidden; overflow-y: scroll; text-align: left; width: 200px;"> Tulisanmu disini! </center></div> </div> </div> </div> </div> </li> </ul> </div>

Aku lupa credit pada siapa, karena aku ambil dari template blogku. Copy codenya di bagian sidebar. Pai2.

Posting Komentar

Thanks for Reading!