Cara Memberikan Teks pada Gambar dengan HTML CSS – Halo semuanya, pasti kalian pernah melihat dimana ada sebuah gambar pada website dan pada gambar tersebut terdapat teks yang bisa kita blok atau seleksi dan di copy, Teknik seperti itu memang sangat diperlukan untuk kebutuhan dan interaktif bagi para pengunjung website, baiklah berikut ini adalah cara mudah memberikan teks di atas gambar menggunakan position pada CSS
1, Membuat struktur HTML
<!DOCTYPE html>
<html>
<head>
<title>Memberikan Teks pada Gambar dengan HTML CSS</title>
</head>
<body>
<div class="box">
<img src="gambar.jpg">
<p class="atasKiri">Atas Kiri</p>
<p class="atasKanan">Atas Kanan</p>
<p class="bawahKiri">Bawah Kiri</p>
<p class="bawahKanan">Bawah Kanan</p>
<p class="tengah">Tengah</p>
</div>
</body>
</html>
Dengan struktur diatas kita akan memiliki sebuah div dengan class .box yang akan menjadi parent dari elemen teks yang ada di dalamnya.
2. Memberikan Ukuran dan Position pada elemen child
Sekarang ini kita akan membuat sebuah css untuk memberikan ukuran dan jenis position yang akan kita gunakan dengan baris css berikut
*{margin: 0;padding: 0}
.box{
width: 500px;
height: 312px;
position: relative;
}
.box img{
width: 100%;
}
img,p{
position: absolute;
}
Diatas sudah kita tentukan ukuran tinggi dan lebar elemen parent, dan juga tipe position yang dimana terdapat position:relative yang digunakan pada Parent, dan position:absolute yang digunakan pada bagian child.
3. Menentukan koordinat masing – masing elemen
Sekarang kita akan memberikan masing - masing elemen sebuah koordinat menggunakan atribut top, right, bottom, left.
.atasKiri{
top: 10px;
left: 10px;
}
.bawahKiri{
bottom: 10px;
left: 10px;
}
.atasKanan{
top: 10px;
right: 10px;
}
.bawahKanan{
bottom: 10px;
right: 10px;
}
.tengah{
left: 50%;
top: 50%;
transform: translate(-50%);
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-o-transform: translate(-50%);
}
Baiklah teman -teman pada bagian ini kita ada sedikit menggunakan atribut transform, untuk membuat elemen dengan class .tengah dapat di posisikan di tengah dengan benar.
