Beranda / CSS3

Membuat Portfolio Sederhana Menggunakan CSS3 Hover Effects By Jake

Halooo semuaaa... apa kabar nih? hhe... kangen juga udah lama nggak ng-update blog ini :)

Ok, di awal tahun ini saya mau ngasih tutorial yang ringan-ringan aja deh ya, intinya kali ini kita akan nyoba bikin sebuah portfolio sederhana, kenapa saya bilang sederhana? karena kali ini kita cuma akan make markup HTML sederhana dengan sedikit sentuhan CSS3 Hover effect, untuk sedikit menghidupkan suasana #halah

Dan bisa dibilang project ini belum sepenuhnya rampung, karena disini saya emang nggak akan ngelink tampilan home dari portfolio ini ke postingan manapun juga, jadi bebas aja klo ada diantara anda yang mau ngerampungin atau nerusin hhe...

Dan project ini pun pure bukan buatan saya, karena saya cuma nyoba mengimplementasikannya kedalam xml template blogger dan kebetulan aja berhasil #soalnya aslinya emang buat wordpress hhe... lantas siapa perancang sesungguhnya? perancang sesungguhnya adalah kang Jake dari Develop a Website.

Dan untuk anda yang mau ngeliat demonya terlebih dahulu, silahkan KLIK DISINI. Dan coba arahkan kursor anda kesalah satu gambar dalam demo tersebut untuk melihat effect hover CSS3-nya hhe... like this lah penampakannya...

Terus gimana cara bikinnya?

1. Login ke Dashboard Blogger anda masing-masing *pake akun masing-masing ya jangan minjem punya temen hhe..
2. Berhubung ini cuma percobaan iseng-iseng, saran saya sih mendingan anda bikin blog baru aja, jangan pake blog utama anda. Tapi klo mau make blog utama ya terserah saya nggak ngelarang, asal jangan lupa backup template dulu
3. Pilih Menu Template.
4. Masuk ke Edit HTML
5. Nah sekarang, tugas anda adalah ngebuat markup HTML utama di xml template anda, delete delete-in aja CSS, widget dan segala macemnya dari default template anda terus sisain markup utamanya.
6. kalo udah, sekarang kita lanjut, letakkan kode CSS dibawah ini, sebelum kode ]]></b:skin>

/* Pfolio #1 */

.folio1 {
    width: 300px;
    height: 300px;
    margin: 10px;
    float: left;
    border: 10px solid #000;
    overflow: hidden;
    position: relative;
    text-align: center;

}

.folio1 .face {
    width: 300px;
    height: 300px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

/* styling effects when hover takes effect */

.folio1 img {
    display: block;
    position: relative;
}
.folio1 h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
}

.folio1 p {
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 20px;
    text-align: center;
}
.folio1 a.icon {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #fff;
    border-radius: 25px;
    color: #000;
    text-transform: uppercase;
}

*/ if you want link hover over effects */
.folio1 a.icon:hover {

}

.folio1 img {
    transition: 0.5s;
}

.folio1 .face{
    background-color: rgba(0,0,0,0.8);
    opacity:0;
    transition: 500ms;
}
.folio1 h2{
    opacity:0;
    background: transparent;
    transform: rotate(180deg) skew(100deg, 100deg);
    transition: 500ms;
    font-size: 32px;
}
.folio1 p {
    font-size: 22px;
    opacity:0;
    transform: rotate(180deg) skew(100deg, 100deg);
    transition: 500ms;
}
.folio1 a.icon {
    opacity:0;
    transform: translateY(100px);
    transition: 500ms;
}

/* Hover overs */

.folio1:hover .face {
    opacity:1;
    transition-delay: 0s;
    cursor: pointer;
}
.folio1:hover img {
    transition-delay: 0s;
}
.folio1:hover h2 {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
}

.folio1:hover p {
    opacity:1;
    transform: scale(1);
    transition-delay: 0.2s;
}
.folio1:hover a.icon {
    opacity:1;
    transform: translateY(0px);
    transition-delay: 0.3s;
}

7. Udah? klo udah monggo letakkan HTML sederhana berikut setelah kode <body>

<div class='block1'>
<div class='folio1'>
     <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjNvi91hZVpPj4kwnYJRPz0392pRKF1pvqjfnZqbgeSG_lRoXnQIhIG8FUlTg5JQzjxpD25WaAY7Y6clwF_M2EgU837S3BeDsfOQLa8RT06sI0b9POFaxkpt3ODglwIkC3NQ1t6zsH1EBS/s1600/Cute-Puppy-Dog-Animal-Wallpapers-HD-Wallpaper~1.jpg'/>
     <div class='face'>
     <h2>Guguk Say</h2>
     <p>bubu dulu ahh...</p>
         <a class='icon' href='#'>+</a>
     </div>

</div>

    <div class='folio1'>
   <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1nABdEOB4pz8mZ96Pct_afg2M2K4ATS3Ih_PrFVJ_1kdSbAD7LYq_GuTMARhBhrEeKaDFLilsar-YZRbpK-M7RfNV-T4b7AVzaRjDHllZpyj_I7VjGgztCof9a-ObKcLCAv3tx8VrwRi4/s1600/ENDANGERED+ANIMAL+SPECIES~1.jpg'/>
     <div class='face'>
     <h2>Guguk Say</h2>
     <p>capek nih gue lari terus</p>
         <a class='icon' href='#'>+</a>
     </div>

</div>

    <div class='folio1'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2pAHEfYDP2IYQ7bykVkPTogt-ZQG6l5ufESUgiYA4X34obZilzSR5eEkE1UaDfeJ6mO78NrlJJTZxLxgDz_iyxCgIztKsKz6w43zCWSlnavRJyyHmV1amn0GcAtrtjXSyTgk5-vlIRWPJ/s1600/wild-animal-wallpapers-4~1.jpg'/>
     <div class='face'>
     <h2>Macan Say</h2>
     <p>macem2 gue telen lu</p>
         <a class='icon' href='#'>+</a>
     </div>

</div> </div>