Ini adalah File HTMLnya
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Hoverbox Image Gallery</title>
<link rel="stylesheet" href='hoverbox.css' type="text/css" media="screen, projection" />
</head>
<body>
<h1>Hoverbox Image Gallery</h1>
<ul class="hoverbox">
<li>
<a href="#"><img src="image/image (1).jpg" alt="gambat satu" /><img src="image/image (1).jpg" alt="gambat satu" class="preview" /></a>
</li>
<li>
<a href="#"><img src="image/image (2).jpg" alt="gambat satu" /><img src="image/image (2).jpg" alt="gambat satu" class="preview" /></a>
</li>
<li>
<a href="#"><img src="image/image (3).jpg" alt="gambat satu" /><img src="image/image (3).jpg" alt="gambat satu" class="preview" /></a>
</li>
<li>
<a href="#"><img src="image/image (4).jpg" alt="gambat satu" /><img src="image/image (4).jpg" alt="gambat satu" class="preview" /></a>
</li>
<li>
<a href="#"><img src="image/image (5).jpg" alt="gambat satu" /><img src="image/image (5).jpg" alt="gambat satu" class="preview" /></a>
</li><li>
<a href="#"><img src="image/image (6).jpg" alt="gambat satu" /><img src="image/image (6).jpg" alt="gambat satu" class="preview" /></a>
</li>
<li>
<a href="#"><img src="image/image (7).jpg" alt="gambat satu" /><img src="image/image (7).jpg" alt="gambat satu" class="preview" /></a>
</li>
</ul>
<p>
Hover Box By : Nanang Sulistiawan | Read the >> <a href="http://sonspring.com/journal/hoverbox-image-gallery">Tutorial</a>
</p>
</body>
</html>
Nah ini file CSSnya :
*{
border:0;
margin:0;
padding:0;
}
/* Basic HTML */
a{
text-decoration:none;
}
body{
background:#fff;
color:#777;
margin:0 auto;
padding:50px;
position:relative;
width:620px;
}
h1{
background:inherit;
border-bottom:1px dashed #ccc;
color:#933;
font:17px Georgia, "Times New Roman", Times, serif;
margin:0 0 10px;
padding:0 0 5px;
text-align:center;
}
p{
clear:both;
font:10px Verdana, Arial, Helvetica, sans-serif;
padding:10px 0;
text-align:center;
}
p a{
background:inherit;
color:#777;
}
p a:hover{
background:inherit;
color:#000;
}
/* =Hoverbox Code */
.hoverbox{
cursor:default;
list-style:none;
}
.hoverbox a{
cursor:default;
}
.hoverbox a .preview{
display:none;
}
.hoverbox a:hover .preview{
display:block;
position:absolute;
top:-33px;
left:-45px;
z-index:1;
}
.hoverbox img{
background:#fff;
border-color:#aaa #ccc #ddd #bbb;
border-style:solid;
border-width:1px;
color:inherit;
padding:2px;
vertical-align:top;
width:100px;
height:75px;
}
.hoverbox li{
background:#eee;
border-color:#ddd #bbb #aaa #ccc;
border-style:solid;
border-width:1px;
color:inherit;
display:inline;
float:left;
margin:3px;
padding:5px;
position:relative;
}
.hoverbox .preview{
border-color:#000;
width:200px;
height:150px;
}
Nih screenshotnya :
Posting Komentar
Posting Komentar