Log in

View Full Version : Using the opacity effect on hover with an existing script


RobMcP
02-09-2011, 08:01 PM
1) Script Title: CSS image galley

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/P110/

3) Describe problem:
I have amended this code to apply a slight opacity to the thumbnail when the mouse is over it, and it's LUVLY, BUT... The opacity also is applied to the larger image as well. Not what I wanted.

If I add to the class
.thumbnail:hover image{opacity:0.5;}

the thumbnail is nicely affected on mouse over, but the same opacity applies to the large image.

Can anyone suggest a method of applying the opacity to the thumbnail only?

Thanks in adv.
McP
azoomer
02-09-2011, 08:47 PM
If you make a new class and apply only to the image tag with the thumbnails it can be achieved.
Forexample you could use this css:

.thumbnaileffect:hover {opacity:0.5;}

with this markup


<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" class="thumbnaileffect" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

scroll to see the new class

For IE you would need to add:

filter:alpha(opacity=50);

to the css for it to work
RobMcP
02-09-2011, 11:16 PM
Thanks for this, just shutting donw now. I'll try this Thurs see what happens.
Will let you know if I got it going or not. Thanks
vwphillips
02-10-2011, 09:49 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;opacity:.5;
}

.main {
opacity:1 !important;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>
</head>

<body>
<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img class="main" src="http://www.dynamicdrive.com/cssexamples/media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img class="main" src="http://www.dynamicdrive.com/cssexamples/media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img class="main" src="http://www.dynamicdrive.com/cssexamples/media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a>

<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img class="main" src="http://www.dynamicdrive.com/cssexamples/media/horses.jpg" /><br />Run wild with horses.</span></a>

<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a>

<br />

<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>

</div>

</body>

</html>
RobMcP
02-24-2011, 07:35 PM
Sorry for the delay in responding to your kind assistance.
My HDD on my desktop went BANG, and I'm stuck with guessing Forum users ids and passwords cos my shortcuts got eaten eeek.
Cheers
RobMcP
02-24-2011, 07:48 PM
I hate to look everybody's gift horse in the mouth, but can this code be made to work in IE7/8? or is that really asking too much?