Membuat halaman rumput untuk “crew tim kami” benar-benar gampang-gampang susah. Kadang-kadang teka-teki antaran pilih structure seperti gallery atau bahkan memakai bootstrap – card.
Cara ini terlahir karena komplikasi tersebut. Kenapa perlu pilih tidak pantas satu jika bisa dengan mudah digabungkan setiap diantara structure seperti gallery dengan bootstrap – card. Mari simak tutorial berikut
Langkah 1 – Tambahkan HTML
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="picture">
<div class="overlay">
<div class="textual content">Hello World</div>
</div>
</div>
Langkah 2 – Tambahkan CSS
/* dimension foto */
.container {
place: relative;
width: 50%;
}
.picture {
show: block;
width: 100%;
top: auto;
}
/* daerah untuk tulisan */
.overlay {
place: absolute;
backside: 100%;
left: 0;
proper: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
top:0;
transition: .5s ease;
}
.container:hover .overlay {
backside: 0;
top: 100%;
}
/* pengaturan textual content */
.textual content {
colour: white;
font-size: 20px;
place: absolute;
prime: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
rework: translate(-50%, -50%);
text-align: middle;
}
Berikut adalah hasilnya
<!DOCTYPE html>
<html>
<head>
<meta title="viewport" content material="width=device-width, initial-scale=1">
<type>
.container {
place: relative;
width: 50%;
}
.picture {
show: block;
width: 100%;
top: auto;
}
.overlay {
place: absolute;
backside: 100%;
left: 0;
proper: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
top:0;
transition: .5s ease;
}
.container:hover .overlay {
backside: 0;
top: 100%;
}
.textual content {
colour: white;
font-size: 20px;
place: absolute;
prime: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
rework: translate(-50%, -50%);
text-align: middle;
}
</type>
</head>
<physique>
<div class="container">
<img src="https://photos.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=gaya&match=crop&w=1534&q=80" alt="Avatar" class="picture">
<div class="overlay">
<div class="textual content">Hello World</div>
</div>
</div>
</physique>
</html>
Anda sederhana menonton: Cara membuat Image Overlay Slide dengan CSS + HTML
Sumber: https://taylorswift10years.com
Kategori: Teknologi
