Menyimpan Tulisan Diatas (menimpa) Gambar – HTML CSS

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.

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

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!

Download Code “Memberi Text Diatas (menimpa) Gambar”

password: riobermano.com

Setelah download, jangan lupa praktek !

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

Selamat mencoba !

Ingin mempelajari lebih banyak mengenai HTML & CSS ? Kunjungi kategori HTML CSS di riobermano.com.

tunggu sebentar...
POS Lainnya:

5
Tinggalkan Komentar

avatar
yuwweriy
Visitor
yuwweriy

Pretty great post. I just stumbled upon your blog and wanted kgbkgaggbgda

may chay bo cao cap
Visitor
may chay bo cao cap

Thanks , I’ve recently been looking for information about this subject
for a while and yours is the best I’ve found out so far.

But, what concerning the bottom line? Are you positive
concerning the source?

febrian
Visitor
febrian

bang cara ditengah tengah gimana

annas
Visitor
annas

margin: 0 auto;

Rasyid
Visitor
Rasyid

Terimakasih mas Rio bermanfaat banget

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi