|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<style>
.img_box{}
.img_box article {width:300px; height:250px; position:relative; float:left; margin:10px; overflow:hidden; border:solid 2px #8399af; background:#161613;}
.img_box article img {width:300px; height:250px; position:absolute; top:0; left:0; border:0;}
.img_box article .boxcaption {width: 100%; height:100px; position:absolute; top:250px; left:0; background: #000; opacity:.8; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80 ); /* For IE 8 */-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
.img_box article.caption .boxcaption {top:208px;}
.img_box article.captionfull .boxcaption {top:250px;}
.img_box article .boxcaption h3,
.img_box article.slideright h3,
.img_box article.thecombo h3,
.img_box article.slideup h3 {margin:10px 10px 4px 10px; color:#fff; font:22px Arial, sans-serif; letter-spacing:-1px; font-weight:bold;}
.img_box article .boxcaption p,
.img_box article.slideright p,
.img_box article.thecombo p,
.img_box article.slideup p {padding:0 10px; color:#afafaf; font-weight:bold; font:12px "Lucida Grande", Arial, sans-serif;}
.img_box article .boxcaption p a,
.img_box article.slideright p a,
.img_box article.thecombo p a,
.img_box article.slideup p a {color:#666;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery(function($) {
$('.img_box article.caption').hover(function() {
$('.cover', this).stop().animate({
top : 150
}, {
queue : false,
duration : 160
});
}, function() {
$('.cover', this).stop().animate({
top : 208
}, {
queue : false,
duration : 160
});
});
$('.img_box article.captionfull').hover(function() {
$('.cover', this).stop().animate({
top : 150
}, {
queue : false,
duration : 160
});
}, function() {
$('.cover', this).stop().animate({
top : 250
}, {
queue : false,
duration : 160
});
});
$('.img_box article.slideright').hover(function() {
$('.cover', this).stop().animate({
left : 300
}, {
queue : false,
duration : 300
});
}, function() {
$('.cover', this).stop().animate({
left : 0
}, {
queue : false,
duration : 300
});
});
$('.img_box article.thecombo').hover(function() {
$('.cover', this).stop().animate({
left : 300,
top : 250
}, {
queue : false,
duration : 300
});
}, function() {
$('.cover', this).stop().animate({
left : 0,
top : 0
}, {
queue : false,
duration : 300
});
});
$('.img_box article.slideup').hover(function() {
$('.cover', this).stop().animate({
top : -250
}, {
queue : false,
duration : 300
});
}, function() {
$('.cover', this).stop().animate({
top : 0
}, {
queue : false,
duration : 300
});
});
$('.img_box article.peek').hover(function() {
$('.cover', this).stop().animate({
top : 90
}, {
queue : false,
duration : 160
});
}, function() {
$('.cover', this).stop().animate({
top : 0
}, {
queue : false,
duration : 160
});
});
});
</script>
</head>
<body>
<section class="img_box">
<article class="captionfull">
<img src="images/florian.jpg" />
<div class="cover boxcaption">
<h3>타이틀1</h3>
<p>
내용입니다.<br />
<a href="">내용입니다.</a>
</p>
</div>
</article>
<article class="caption">
<img src="images/jareck.jpg" />
<div class="cover boxcaption">
<h3>타이틀2</h3>
<p>
내용입니다.<br />
<a href="">내용입니다.</a>
</p>
</div>
</article>
<article class="slideright">
<img src="images/kamil.jpg" class="cover" />
<div>
<h3>타이틀3</h3>
<p>
내용입니다.<br />
<a href="">내용입니다.</a>
</p>
</div>
</article>
<article class="thecombo">
<img src="images/martin.jpg" class="cover" />
<div>
<h3>타이틀4</h3>
<p>
내용입니다.<br />
<a href="">내용입니다.</a>
</p>
</div>
</article>
<article class="slideup">
<img src="images/nonsense.jpg" class="cover" />
<div>
<h3>타이틀5</h3>
<p>
내용입니다.<br />
<a href="">내용입니다.</a>
</p>
</div>
</article>
<article class="peek">
<img src="images/birss.jpg" style="height:90px;" />
<img src="images/buildinternet.jpg" class="cover" />
</article>
</section>
</body>
</html> |
slidingBoxes.zip