Cara Membuat jQuery Sliding Text on Images

Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat jQuery Sliding Text on Images. Dalam tutorial ini, kita akan menampilkan teks pada gambar dengan kotak geser pada saat ada event mouse-over. Dalam tutorial sebelumnya saya telah membuat Cara Mendapatkan Nilai Checkbox di jQuery, silahkan teman – teman link tersebut jika belum melihat tutorial saya sebelumnya.

Dalam contoh ini, saya menggunakan jQuery dan CSS untuk menampilkan teks event mouse-over sliding pada gambar. Saya menggunakan fungsi jQuery slideToggle () untuk membuat efek toggle pada bingkai gambar hover.

Teks Sliding HTML

Script ini menampilkan bingkai gambar dengan teks sliding. Teks sliding DIV awalnya tersembunyi dan ditampilkan dengan efek mouse-over jQuery pada mouse di atas peristiwa bingkai gambar.

<div class="image-frame">
	<img src="4.jpg"/>
	<div class="image-caption">
	  <h2>Slide1</h2>
	  Mouse over Slide 1 to view the caption.
	</div>
</div>
<div class="image-frame">
	<img src="2.jpg"/>
	<div class="image-caption">
	  <h2>Slide2</h2>
	  Mouse over Slide 2 to view the caption.
	</div>
</div>

Sliding Box CSS

CSS ini digunakan untuk memposisikan kotak sliding jQuery pada gambar.

.image-frame {
	float: left;
	position: relative;
	margin: 5px;
	color: #333;
}
.image-frame .image-caption {
	display: none;
	opacity: 0.8;
	background:#cae5c1;
	width: 290px;
	position: absolute;
	bottom: 0px;
	padding: 5px;
}

jQuery Slide Toggle

Skrip ini beralih info gambar menggunakan kotak sliding di hover.

<script language="javascript" type="text/javascript">
	$(document).ready(function() {
	    $('.image-frame').hover(function(){
			$('.image-caption',this).slideToggle('slow');
		}, function(){
			$('.image-caption',this).slideToggle('slow');
	    });
	});
</script>

Dari script diatas maka kita akan menghasilkan output screenshot seperti dibawah ini;

Oke itulah tadi pembahasan saya tentang Cara Membuat jQuery Sliding Text on Images, semoga bermanfaat.