On Sat, 28 Oct 2006 17:13:31 +0100, Rosemary Probert wrote:
> Hi,
>
> I have a page with a number of thumbnails that link to individual pages
> which show a larger image and information about each photo.
>
> I want to be able to style the thumbnails like links - change the
> thickness of the border and/or its colour. Nothing too fancy!
>
Hi Rosemary,
You may be interested in some CSS I did for a friend's gallery recently.
Hopefully it will give you some ideas. The relevant markup is -
HTML
<ol id="thumbs">
<li><a href="/images/gma/final/F_lunch.jpg" title="Lunch with
grampa at the
rest home"><img src="images/gma/thumbs_gma/lunch.jpg" width="100" height="100"
alt="Lunch with grampa" /></a></li>
<li><a href="/images/gma/final/F_shoes.jpg" title="Baachan
trying on
shoes"><img src="images/gma/thumbs_gma/shoes.jpg" width="100" height="100"
alt="Trying on shoes" /></a></li>
... etc ...
</ol>
CSS
#thumbs {
width: 450px; height: 340px;
}
#thumbs {
margin: 120px auto 30px;
list-style-type: none;
}
#thumbs li {
float: left;
}
#thumbs li a {
display: block;
text-decoration: none;
}
#thumbs li a {
background-color: #fe9;
width: 100px; height: 100px;
border: 6px solid #fff;
}
#thumbs img {
border-width: 0;
vertical-align: text-bottom;
}
#thumbs a:focus,
#thumbs a:hover {
border-color: #e0e0e0;
}
#thumbs a:focus img,
#thumbs a:hover img,
#thumbs a:active img {
opacity: 0.8;
-moz-opacity: 0.8;
}
/* use this for IE only - */
#thumbs a:hover img,
#thumbs a:active img {
filter: alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
The result is here:
<http://www.hucklesby.com/seven/gma.html>
Feel free to use what you need.
Cordially,
David
--
www.hucklesby.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
