إنضم لنا

Mebuat hover image di blog





Ilmu bisa kita dapatkan kalo kita belajar
Hanya motivasi untuk membuka pembicaraan hehe



Pada kesepatan kali ani, maaf ini maksud saya vada kesenpatan kali ini saya akan mebuat tutorial cara membuat sebuah gambar hover,

Terdengar tidak asing di telinga karna kita sering sekali menjumpainya pada sebuah blog atau websait namun tidak salah juga jika saya ingin membagikan hal yang sama, toh yang penting tidak kopi pastel

Buat kalian yang ingin melihat demonya saya juga sudah siapkan di bawah ini



Baik langsung saja kita akan memulai cara memasangnya, pertama kalia wajib harus login di akun bloger kalian , selanjutnya kalian klik tema dan edit HTML, kemudian salin css di bawah dan tepelkan di atas code ]]></b:skin>

figure.snip1162 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 220px;
  max-width: 310px;
  max-height: 310px;
  width: 100%;
  background: #000000;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1162 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
}
figure.snip1162 img {
  max-width: 100%;
  position: relative;
  opacity: 0.9;
}
figure.snip1162 figcaption {
  position: absolute;
  top: 45%;
  left: 7%;
  right: 7%;
  bottom: 45%;
  border: 1px solid white;
  border-width: 0 1px 1px;
}
figure.snip1162 .heading {
  overflow: hidden;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
figure.snip1162 b {
  display: table;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  text-align: center;
  width: auto;
  text-transform: uppercase;
  font-weight: 400;
}
figure.snip1162 b span {
  font-weight: 800;
}
figure.snip1162 b:before,
figure.snip1162 b:after {
  position: absolute;
  display: block;
  width: 1000%;
  height: 1px;
  content: '';
  background: white;
  top: 50%;
}
figure.snip1162 b:before {
  left: -1000%;
}
figure.snip1162 b:after {
  right: -1000%;
}
figure.snip1162 p {
  top: 50%;
  font-size: 0.9em;
  font-weight: 500;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  width: 100%;
  padding: 0 20px;
  margin: 0;
  opacity: 0;
}
figure.snip1162 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1162:hover img,
figure.snip1162.hover img {
  opacity: 0.25;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
figure.snip1162:hover figcaption,
figure.snip1162.hover figcaption {
  top: 7%;
  bottom: 7%;
}
figure.snip1162:hover p,
figure.snip1162.hover p {
  opacity: 1;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}
 
Kemudian salin html di bawah ini dan tempelkan pada sebuah postingan yang kalian buat
<figure class="snip1162">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample22.jpg" alt="sq-sample22" />
  <figcaption>
    <div class="heading">
      <b>cenggini <span> sarang</span></b>
    </div>
    <p>perhatikan baik baik ini adalah demo untuk membuat mebuat image hover</p>
  </figcaption>

Keterangan
Kalian ganti gambar dan tulisan dengan gambar milik kalian

Smoba bermanfaat
Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail