Be The Best and Always Be !

Teks Diatas (menimpa) Gambar – HTML CSS

2.224

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: (lihat gambar).

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“. Sekarang buat tulisan pada HTML tepat didalam div classprofilKiri” dan classprofilKanan“. Maka tampilan web nya sekarang akan seperti ini: (lihat gambar).

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.

- Advertisement -

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 saya atur dengan CSS seperti diatas, akan terlihat seperti ini: (lihat gambar).

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).

Baca Juga:
1 dari 239

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.

Untuk download keseluruhan code yang saya buat ini, silahkan klik link dibawah ini, gratis!

Size: 204.47KB

Download Code “Memberi Text Diatas (menimpa) Gambar”

password: riobermano.com

Setelah download, bisa praktekan langsung dengan code yang sudah ada atau kalo masih bingung bisa tonton video tutorialnya disini.

Lihat Post Lainnya: