CSS Image Gallery

47 views

Image Gallery

The following image gallery is created with CSS:

example:

<html>
<head>
<style type=”text/css”>
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>

<div class=”img”>
<a target=”_blank” href=”text_big.htm”><img src=”text1_small.jpg” alt=”Klematis” width=”110″ height=”90″ /></a>
<div class=”desc”>Add image here</div>
</div>
<div class=”img”>
<a target=”_blank” href=”text1.htm”><img src=”text1_small.jpg” alt=”Klematis” width=”110″ height=”90″ /></a>
<div class=”desc”>Add a description of the image here</div>
</div>
<div class=”img”>
<a target=”_blank” href=”text_big.htm”><img src=”text2_small.jpg” alt=”Klematis” width=”110″ height=”90″ /></a>
<div class=”desc”> a description of the image here</div>
</div>
<div class=”img”>
<a target=”_blank” href=”text1_big.htm”><img src=”text2_small.jpg” alt=”Klematis” width=”110″ height=”90″ /></a>
<div class=”desc”>the image here</div>
</div>

</body>
</html>

2..

<html>
<head>
<style type=”text/css”>
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img
{
border: 1px solid #0000ff;
}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>

<div class=”img”>
<a target=”_blank” href=”text4_big.htm”>
<img src=”text4_small.jpg” alt=”Klematis” width=”110″
height=”90″ />
</a>
<div class=”desc”>Add a image here</div>
</div>
<div class=”img”>
<a target=”_blank” href=”text5_big.htm”>
<img src=”text6_small.jpg” alt=”Klematis” width=”110″
height=”90″ />
</a>
<div class=”desc”>Add a image here</div>
</div>
<div class=”img”>
<a target=”_blank” href=”text7_big.htm”>
<img src=”text8_small.jpg” alt=”Klematis” width=”110″
height=”90″ />
</a>
<div class=”desc”>Add a image here</div>
</div>
<div class=”img”>
<a target=”_blank” href=”text9_big.htm”>
<img src=”text9_small.jpg” alt=”Klematis” width=”110″
height=”90″ />
</a>
<div class=”desc”>Add the image here</div>
</div>

</body>
</html>

CSS Opacity.

How much of the image do we want to see? All of it?

Without any filters applied the opacity of an image. Just the words opacity and transparency are confusing. They are opposite ends of the spectrum as someone at Digg commented 10% opacity = 90% transparency. That’s it in a nutshell. Opacity is a little ditty that goes something like this.

Opacity with onmouseover and onmouseout

The CSS for transOFF. transON, trans25, and trans75 looks like this.

div.transOFF {width: 100%; background-color: silver;border:1px solid black; }
div.transON {width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; }
div.trans25 {width: 100%; background-color: silver;opacity:.25;filter: alpha(opacity=25); -moz-opacity: 0.25;border:1px solid black; }
div.trans75 {width: 100%; background-color: silver;opacity:.75;filter: alpha(opacity=75); -moz-opacity: 0.75;border:1px solid black; }

Image Hover

Apply the CSS defined opacity styles trans25,trans75, transON, and transOFF, to an image. Hover to see the opacity effect.

Text and Image Hover

Apply the CSS defined opacity styles trans25,trans75, transON, and transOFF, to an image and text. Hover to see the opacity effect.

Aligned Images Hover

Opacity works in Mozilla and IE. It also works in current versions of Opera. The CSS3 specification for opacity opacity:.50; is included in the style we created along with filter: alpha(opacity=50); for IE and -moz-opacity: 0.5;.
Transparency.

The fact that image files are always rectangular can present some limitations in site design. It may be fine for pictures, but it is less desirable for logos, or for images that gradually fade into the background.

For relatively simple web pages (such as the one that you are reading now), this restriction is easily worked around: simply match the background of your image to the background of your web page. If you pick the exact same color (easiest if using pure white), the rectangular boundary of your image will be invisible. This simple technique has been utilized for many of the graphics on this page.

This technique is less successful if your background is more complex, however. If you use an image as a background, for example, you can’t just match one color. And because different web browsers have slight differences in how they display web pages, it’s basically impossible to try and match the background of your image to the background of your web page.

What you really want to do is specify that regions of your image are transparent. The table below simulates a web page with an image-based background. By tagging the white regions of our image as transparent, the background image of the web page shows through.

Conclusion.

Antialiasing and transparency are two tools that depend upon each other to get good results. Now that you know how they work, use them together to make quality, professional designs.
<div style=”width:250px;margin:0 auto;”>

</div>

Opacity Over Easy.

This is the easy way to hover with opacity. The opacity is all in CSS. The onmouseover isn’t needed and there is only one image.

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
</style>

« CSS Pseudo-classes	CSS Media Type »
Posted on Friday, June 27th, 2008 at 3:55 pm under Basic of Computers \| RSS 2.0 Feed

Post Comment

You must be logged in to post a comment.