Creating Image Gallery Using CSS

With CSS code, you can create an Image Gallery and add a description of the image if you want to do so. I think it is alike to the "Featured Content" that some publishers usually adopt for their website. It's called Image Gallery because it has a frame, that which we style it. Here is an example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.img {margin:2px; border:1px solid #888; height:auto; width:auto; float:center; text-align:center;}
div.img img {display:inline; margin:2px; border:1px solid #eee;}
div.img a:hover img {border: 1px solid #aaa;}
div.desc {text-align:center; font-weight:normal; width: 150px; margin:2px;}
</style>
</head>

<body>

<div class="img">
<a target="_blank" href="Url goes here"><img src="Image url goes here" alt="Text for alternative image" width="140" height="120"/></a>
<div class="desc">Add a description here</div>
</div>
<div class="img">
<a target="_blank" href="Url goes here"><img src="Image url goes here" alt="Text for alternative image" width="140" height="120"/></a>
<div class="desc">Add a description here</div>
</div>
<div class="img">
<a target="_blank" href="Url goes here"><img src="Image url goes here" alt="Text for alternative image" width="140" height="120"/></a>
<div class="desc">Add a description here</div>
</div>
<div class="img">
<a target="_blank" href="Url goes here"><img src="Image url goes here" alt="Text for alternative image" width="140" height="120"/></a>
<div class="desc">Add a description here</div>
</div>

</body>
</html>

To be the lesser the arrangement above will generate a image gallery similar to the below.

Android 4.1 Jelly Bean
Android Os Update: Google announced their latest OS update, Android 4.1 Jelly Bean. Reportedly it's better than the previous one "Ice Cream Sandwich OS". more >>
Ps1 Games For Nokia
Play Ps1 Games On Nokia Symbian S60v3: Ps1 Games are now also playable on Nokia Phones, the games run good with an emulator called StyleTap Emulator. more >>
Google Nexus 7
Google Nexus 7: A few days ago Google officially unveiled the Nexus 7 tablet for a low price at the Google I/O Developer Conference in San Francisco. more >>

0 comments:

Post a Comment