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
Keterangan
Kalian ganti gambar dan tulisan dengan gambar milik kalian
Smoba bermanfaat
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>Kemudian salin html di bawah ini dan tempelkan pada sebuah postingan yang kalian buat
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;
}
<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
