[jQuery] - Hover Zoom Effect with jQuery and CSS

วันอังคารที่ 25 มีนาคม พ.ศ. 2557 0 No comments

Introduction

The hover zoom effect basically reverse zooms an image while fading in a label on top of it when the mouse hovers over it. It makes for a pretty slick effect which could be used on thumbnails. As always, you can check out a demo or grab the source right here if you don’t want to read the entire tutorial.

ขั้นตอนการติดตั้ง Hover Zoom

ก่อนอื่นให้คุณ Login เข้าไปที่ blogger.com และจากแผงควบคุมให้เข้าไปที่ แม่แบบ >> แก้ไข HTML

ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดรูปแบบ

ให้คุณค้นหาโค้ด ]]></b:skin> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด ]]></b:skin>

/* --- Container configuration ------------------------------------------------- */
.viewport {
border: 3px solid #eee;
float: left;
height: 299px;
margin: 0 9px 9px 0;
overflow: hidden;
position: relative;
width: 450px;
}
/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
margin-right: 0;
}
/* --- Link configuration that contains the image and label ---------------------- */
.viewport a {
display: block;
position: relative;
}
.viewport a img {
height: 332px;
left: -20px;
position: relative;
top: -20px;
width: 500px;
}
/* --- Label configuration --------------------------------------------------- */
.viewport a span {
display: none;
font-size: 3.0em;
font-weight: bold;
height: 100%;
padding-top: 120px;
position: absolute;
text-align: center;
text-decoration: none;
width: 100%;
z-index: 100;
}
.viewport a span em {
display: block;
font-size: 0.45em;
font-weight: normal;
}
/* --- Dark hover background --------------------------------------------------- */
.dark-background {
background-color: rgba(15, 15, 15, 0.6);
color: #fff;
text-shadow: #000 0px 0px 20px;
}
.dark-background em {
color: #ccc;
}
/**
* You could create multiple hover background classes for different looks depending on the
* image type. Use your imagination!
*/

ขั้นที่ 2 ติดตั้ง Javascript (jQuery)

ให้คุณค้นหาโค้ด </body> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด </body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.viewport').mouseenter(function(e) {
$(this).children('a').children('img').animate({ height: '299', left: '0', top: '0', width: '450'}, 100);
$(this).children('a').children('span').fadeIn(200);
}).mouseleave(function(e) {
$(this).children('a').children('img').animate({ height: '332', left: '-20', top: '-20', width: '500'}, 100);
$(this).children('a').children('span').fadeOut(200);
});
});
</script>

จากนั้นก็บันทึกเทมเพลต

ขั้นที่ 3 ติดตั้ง HTML รูปภาพที่ต้องการแสดง

ให้นำโค้ด ไปวางตามตำแหน่งที่ต้องการ หรืออาจจะวางในGadget html ก็ได้ครับ
โดยแก้ไข url ลิงค์ url รูปภาพ ไตเติ้ล รายละเอียด

<div class="viewport">
<a href="url ลิงค์">
<span class="dark-background">ไตเติ้ล<em>รายละเอียด</em></span>
<img src="url รูปภาพ" alt="" />
</a>
</div>