7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan

Blog Ocha - 7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan - Hallo sahabat Blog Ocha dimanapun kalian berada, selamat malam dan selamat berkunjung kembali ya guys, setelah kemarin membahas dan berbagi mengenai Cara Membuka Dan Memperbaiki Adapter Charger Laptop Asus X441S, pada kesempatan malam ini akan sedikit mengulas 7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan, untuk selengkapnya simak terus dibawah ini ya...

7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan

OK Next... Tutorial Blogger kali ini Ocha ingin mengajak kalian untuk mempercantik blog dengan tips dan trik Desain Blog, yaitu cara membuat efek hover pada gambar atau image di postingan blog... Ada banyak cara untuk memberi efek hover pada gambar di postingan blog, salah satunya yaitu efek image dengan CSS3 dan JQuery...

Namun kali ini Blog Ocha menggunakan code CSS 3... Pada artikel 7 Efek Hover CSS 3 Keren pada Gambar ini, kalian juga dapat melihat semua live demo dari contoh aneka efek hover keren pada gambar, seperti Efek hover Transparan, Efek hover zoom, spin, border, transform dan yang lainnya dibawah ini serta code CSS 3 yang bisa sobat copy dan diletakkan di blog atau template sobat...

7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan


Efek gambar atau juga disebut Efek hover, tersebut akan terlihat ketika mouse didekatkan pada gambar yang bersangkutan atau diarahkan dengan mouse / pointer pada gambar tersebut, gambar juga dapat berupa link yang tertuju pada sebuah URL tertentu tetapi bisa juga tanpa link samasekali...

Penggunaan efek atau hover effect pada gambar / image pada postingan sobat, selain menambah cantik tampilan blog juga memperbesar kemungkinan peningkatan pageview blog dikarenakan pengunjung atau visitor tentu akan lebih betah berlama - lama di blog kalian... Dan kemungkinan mengunjungi blog sobat kembali lebih terbuka... so, kenapa tidak dicoba saja sob ??...

#1. Contoh Efek Hover ( Transparan - CSS Image Opacity )


7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan

.img1:hover {
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */
}

#2. Contoh Efek Hover ( Berputar - 360 deg rotate image )


7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan

.img2{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.img2:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

#3. Contoh Efek Hover ( Spin and Zoom )


7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan

.img3 {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.img3:hover {
-webkit-transform: scale(1.2) rotate(1080deg);
-moz-transform: scale(1.2) rotate(1080deg);
-o-transform: scale(1.2) rotate(1080deg);
-ms-transform: scale(1.2) rotate(1080deg);
transform: scale(1.2) rotate(1080deg);
}

#4. Contoh Efek Hover ( Zoom )


7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan

.img4 {
height:auto;
transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}

.img4:hover {
transition: all 0.3s;
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

#5. Contoh Efek Hover ( Melingkar )


7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan

.img5 {
border-radius: 30px 0 30px 0;
-moz-border-radius: 30px 0 30px 0;
-webkit-border-radius: 30px 0 30px 0;
-o-border-radius: 30px 0 30px 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}

.img5:hover {
box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
-o-border-radius:0;
}

#6. Contoh Efek Hover ( Mengecil )


7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan

.img6 {
box-shadow: 0 3px 6px rgba(0,0,0,.25);
transform: rotate(+2deg);
-o-transform: rotate(+2deg);
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}

.img6:hover {
box-shadow: 0 3px 6px rgba(0,0,0,.5);
transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

#7. Contoh Efek Hover ( Rotasi dan Bayangan )


7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan

.img7 {
border:5px solid #0000ff;
}
.img7:hover {
border:8px solid #00ff00;
}

Cara Pemasangan Ke 7 Efek Hover Keren Pada Gambar Didalam Postingan


Efek Hover ini umunya berjalan dengan baik pada browser Google Chrome dan Mozilla Firefox ( update earlier Browser recomended ), sedangkan pada IE gunakan minimal IE8 atau update earlier... Untuk menggunakanya efek - efek hover diatas, langkah yang harus dilakukan yaitu meletakkan salah satu kode CSS diatas yang sobat suka atau semuanya juga boleh dan pasang sebelum tag ]]></b:skin> pada template blog kalian dengan cara sebagai berikut...
  • Log in Blogger.Com
  • Pilih Template => Edit HTML
  • Tekan F3 => cari kode ]]></b:skin>
  • Copy kode CSS diatas yang sobat sukai, pastekan / letakkan tepat sebelum tag ]]></b:skin>
  • Kemudian Save Template

Penulisan pada postingan blog => Post Editor Blogger dalam mode HTML, yaitu menggunakan kode HTML berikut :

  1. Efek Hover Gambar Tanpa Link


    Gunakan kode HTML berikut untuk penulisan efek hover tanpa link :
    <img class="img1" src="URL GAMBAR" />

    Note: Kode tersebut digunakan juga apabila sobat mempunyai lebih dari satu efek hover css pada templatenya, yaitu cukup ganti img1 dengan img2 dan seterusnya
  2. Efek Hover disertai Link / URL


    Gunakan kode HTML berikut :
    <a class="img1" href="https://cara-ocha.blogspot.co.id"><img  border="0" src="URL GAMBAR" /></a>

    Note: class="img1" : nama code css hover yang sobat pilih dan URL GAMBAR : alamat URL gambar

Tonton Video Tutorialnya



OK Next... kiranya hanya Itu saja yang dapat admin Blog Ocha sampaikan pada kesempatan malam hari ini, mengenai 7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan selamat malam dan sampai jumpa lagi di postingan selanjutnya!!!...


Before you continue reading, it is necessary to underline that what is written is only a reference! so if there are errors in words and delivery methods, please understand! and below the recommendation article for you!

Content Disclaimer!

  • I as the owner of "BlogCaraOcha" thank you to all loyal readers, and those who accidentally stopped by here.

    And I apologize if there are many advertisements on the homepage or in the post.

    After "BlogCaraOcha" is accepted as a Google publisher, Google automatically places all advertisements.

  • If the content on "BlogCaraOcha" has similarities with other sites or blogs, it only provides a reference to each other by spreading the word in a simple article.

    With the aim, all internet visitors can easily and freely which if the article is easy to understand.

    In addition, so that readers can easily find what is on the search, with content that can provide content in surfing the internet!

  • All images posted in the article are not 100% owned by "BlogCaraOcha" but are taken from Google Search.

    So if there are similarities with the images on other sites, it is only for illustration only (to decorate the storyline as outlined in the article).

    For some of the images here, they are purely self-created, with the same purpose as illustration only.

    However, if there are inappropriate images and ask to be removed, please provide more detailed information via the contact at "BlogCaraOcha"

  • For content that discusses the product review or tutorial, if there are errors, please be advised that it may be an error in typing words or lacking in detail reviewing.

    So if there are typos and results that are not appropriate, can provide input where the location of the error or lack, so that the content is immediately deleted or corrected.

    But before submitting, try to see between the date / year the post was published with the current date / year.

    Because it could be other times what the written policy has changed.
  • Berlangganan via Email

    '