Cara Menyimpan Tulisan di Atas (Menimpa) Gambar

6

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 classprofilKiri” dan classprofilKanan“, masing-masing posisi nya saya buat position “relative” karena supaya dimasukkan tulisan bisa menimpa diatasnya. Syaratnya tulisan yang akan dimasukkan perlu diatur positionabsolute“.

ads by posciety

Sekarang buat tulisan pada HTML tepat didalam div classprofilKiri” dan classprofilKanan“. 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 positionabsolute“, saya akan masukkan property untuk class text, h2 dan p di bawah classprofilKiri” dan classprofilKanan” 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 positionabsolute“, artinya positionabsolute” yaitu kita dapat mengatur posisi jarak atas kanan kiri atau bawah sesuai yang kita inginkan. Saya sisipkan positionabsolute” untuk classtext1” dan class “text2” agar mereka bisa diatur posisi atas kanan bawah atau kirinya sesuai yang kita inginkan. Makanya 2 baris dibawah positionabsolute” 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 classprofil” 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 !

Artikel Lainnya
Lihat Komentar (6)

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya