codescracker


css

CSS Images



« Previous Tutorial Next Tutorial »


CSS Image Gallery

You are free to use CSS to create simple or complex image gallery. Here is the image gallery demo using CSS.

CSS Image Gallery Demo

css image gallery1
You can add description of this image here
css image gallery2
You can add description of this image here
css image gallery3
You can add description of this image here

CSS Images Example

Let's look at the following image gallery example which is created with CSS as above you have seen.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Image Example</title>
	<style>
	div.img
	{
		margin: 5px;
		padding: 5px;
		border: 2px solid blue;
		height: auto;
		width: auto;
		float: left;
		text-align: center;
	}
	div.img img
	{
		display: inline;
		margin: 5px;
		border: 1px solid #ffffff;
	}
	div.img a:hover img
	{
		border: 1px solid blue;
	}
	div.desc
	{
		text-align: center;
		font-weight: normal;
		width: 130px;
		margin: 5px;
	}
	</style>
</head>
<body>

<div class="img">
	<a target="_blank" href="#"><img src="image1.jpg" alt="css image1" width="120" height="100"></a>
	<div class="desc">You can add description of this image here</div>
</div>
<div class="img">
	<a target="_blank" href="#"><img src="image2.jpg" alt="css image2" width="120" height="100"></a>
	<div class="desc">You can add description of this image here</div>
</div>
<div class="img">
	<a target="_blank" href="#"><img src="image3" alt="css image3" width="120" height="100"></a>
	<div class="desc">You can add description of this image here</div>
</div>

</body>
</html>

Here is the sample output produced by the above CSS image example code:

css image example

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test