Cara Menyimpan Tulisan di Atas (Menimpa) Gambar

Biasanya teks disimpan disamping atau dibawah gambar, kali ini akan saya bagikan tutorial mudah tentang memberi teks diatas gambar pada HTML5 dengan bantuan CSS3. Misalnya saya memilik file HTML seperti ini:

Disini terdapat nama class “profilKiri” dan class “profilKanan“, masing-masing posisi nya saya buat position “relative” karena supaya dimasukkan tulisan bisa menimpa diatasnya. Syaratnya tulisan yang akan dimasukkan perlu diatur position “absolute“.

Sekarang buat tulisan pada HTML tepat didalam div class “profilKiri” dan class “profilKanan“. Maka tampilan web nya sekarang akan seperti ini:

Beginilah hasilnya ketika kita tambahkan teks tapi belum diatur CSS nya. Hanya mengingatkan, pastikan kalian memasukkan text di dalam div yang sama dengan posisi gambar.

Text yang kita masukkan akan diatur position “absolute“, saya akan masukkan property untuk class text, h2 dan p di bawah class “profilKiri” dan class“profilKanan” biar rapih aja. Kalian silahkan masukkan dimana saja. Maka akan seperti ini jadinya:

.profil {
	overflow: hidden;
	background-color: #E9E9E9;
}
.profil img {
	width: 380px;
	height: 308px;
	border: 20px solid #fff;
	}
.profil .profilKiri {
	width: 425px;
	float: left;
	position: relative;
	padding: 15px 2px 15px 15px;
	margin-left: 8px;
	}
.profil .profilKiri .text1 {
	width: 180px;
	position: absolute;
	top: 60px;
	right: 35px;
	}
.profil .profilKiri .text1 h2 {
	color: #fff;
	}
.profil .profilKiri .text1 p {
	font-size: 12px;
	}

.profil .profilKanan {
	width: 425px;
	float: right;
	position: relative;
	padding: 15px 15px 15px 2px;
	margin-right: 8px;
	}
.profil .profilKanan .text2 {
	width: 180px;
	position: absolute;
	top: 60px;
	right: 35px;
	}
.profil .profilKanan .text2 h2 {
	color: #fff;
	}
.profil .profilKanan .text2 p {
        font-size: 12px;
}

Maka setelah diatur dengan CSS seperti diatas, akan terlihat seperti ini:

Posisi text memiliki position “absolute“, artinya position “absolute” yaitu kita dapat mengatur posisi jarak atas kanan kiri atau bawah sesuai yang kita inginkan. Saya sisipkan position “absolute” untuk class “text1” dan class “text2” agar mereka bisa diatur posisi atas kanan bawah atau kirinya sesuai yang kita inginkan. Makanya 2 baris dibawah position “absolute” saya sisipkan top= 60px dan right= 35px yang artinya saya tentukan manual jarak atas (top) dan jarak kanan (right).

Dari Titik Mana Jarak Itu Dimulai ?

Dari titik class “profil” karena kita masukkan text ini didalam div class “profil“. Pada hasil gambar diatas, tulisannya kurang terlihat ya ? Kalian bisa ganti warna tulisan sesuai desain masing-masing, ganti warna tulisan tersebut pada color h2 nya.

Jangan lupa praktek!

Masih bingung ? Tonton: Video tutorial cara membuat tulisan diatas menimpa gambar pada HTML CSS.

Selamat mencoba !