CSS Image Sprites & Image Gallery

Image Sprites:

<img id=”home” src=”img_trans.gif”> – Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS
• width: 46px; height: 44px; – Defines the portion of the image we want to use
• background: url(img_navsprites.gif) 0 0; – Defines the background image and its position (left 0px, top 0px)

Example

<!DOCTYPE html>

<html>

<head>

<style>

#home

{ width: 46px; height: 44px;

background: url(img_navsprites.gif) 0 0; }

#next

{ width: 43px; height: 44px;

background: url(img_navsprites.gif) -91px 0; }

</style>

</head>

<body>

<img id=”home” src=”img_trans.gif”><br>

<br> <img id=”next” src=”img_trans.gif”>

</body>

</html>

Example

<!DOCTYPE html>

<html>

<head>

<style>

div.img

{ margin: 5px;

border: 1px solid #ccc;

float: left;

width: 180px; }

div.img:hover

{ border: 1px solid #777; }

div.img img

{ width: 100%; height: auto; }

div.desc

{ padding: 15px; text-align: center; }

</style>

</head>

<body>

<div class=”img”>

<a target=”_blank” href=”img_fjords.jpg”>

<img src=”img_fjords.jpg” alt=”Trolltunga Norway” width=”300″ height=”200″> </a>

<div class=”desc”>Add a description of the image here</div> </div>

<div class=”img”>

<a target=”_blank” href=”img_forest.jpg”>

<img src=”img_forest.jpg” alt=”Forest” width=”600″ height=”400″>

</a>

<div class=”desc”>Add a description of the image here</div> </div>

<div class=”img”>

<a target=”_blank” href=”img_lights.jpg”>

<img src=”img_lights.jpg” alt=”Northern Lights” width=”600″ height=”400″>

</a>

<div class=”desc”>Add a description of the image here</div> </div>

<div class=”img”>

<a target=”_blank” href=”img_mountains.jpg”>

<img src=”img_mountains.jpg” alt=”Mountains” width=”600″ height=”400″> </a>

<div class=”desc”>Add a description of the image here</div> </div>

</body>

</html>

Leave a Reply

Your email address will not be published. Required fields are marked *