Эпиграф в стиле tumblr (перевод windymind)
HTML верх
Код:
<style type="text/css">
a {
color:#4de2e0;
text-decoration:none;
}
#container {
width:450px;
height:150px;
position:relative;
overflow:hidden;
z-index:0;
padding:0;
margin:0 auto;
background-image:url(http://www.htmldrive.net/edit_media/2010/201010/20101013/image_slide/images/nemo.jpg);
border:10px solid #414141;
}
#container:hover {
border-color:#303030;
}
#overlay {
background-color:#000;
display:block;
position:absolute;
top:0;
left:0;
width:450px;
height:150px;
z-index:1;
}
#hover {
width:400px;
display:block;
height:100px;
position:absolute;
z-index:3;
padding:25px;
}
#hover p {
color:#fff;
font-weight:normal;
}
</style>
<body>
<div id="container">
<div id="overlay">
</div>
<div id="hover">
<h1>Cool hovering slide effect!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p><a href="#">» Read more</a>More script and css style
: <a href="http://www.htmldrive.net/" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">www.htmldrive.net </a></p>
</div>
</div>
</body>HTML низ
Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var colour = $("#overlay");
var content = $("#hover");
content.hide();
colour.hide();
$("#container").hover(function() {
content.stop().show().css({ "left" : "-450px" }).animate({left : 0}, 300);
colour.stop().fadeTo(500, .7)
}
,function() {
content.stop().animate({left : 450}, 300);
colour.stop().fadeTo(500, 0)
});
});
</script>
