|
|
|
|
CSS TUTORIALS
|
Image Gallery:
|
|
|
|
|
|
|
|
How to use Image Gallery |
|
|
The following image gallery is created with CSS:
Example
<html>
<head>
<style>
div.img {
margin: 10px;
padding: 10px;
border: 2px solid #000000;
height: auto;
width: auto;
float: right;
text-align: center;
}
div.img img {
display: inline;
margin: 10px;
border: 2px solid #0000;
}
div.img a:hover img {
border:2px solid #000000;
}
div.desc {
text-align: center;
font-weight: normal;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div> class="img">
<a> target="_blank" href="tree.htm">
<img src="tree.jpg" alt="plant" width="100" height="90">
</a>
<div> class="desc">Add a description of the image here</div>
</div7gt;
<div> class="img">
<a target="_blank" href="tree.htm">
<img src="tree2.jpg" alt="plant" width="100" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="tree3.htm">
<img src="tree3.jpg" alt="plant" width="100" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="tree4.htm">
<img src="tree4.jpg" alt="plant" width="100" height="90">
</a>
<div> class="desc">Add a description of the image here</div>
</div>
</body>
</html>
|
|
|
|
Mostly Visited Link
Books Link
Templates Sample
All Rights Reserved with Project code
|
|