We’re using CSS mouse over effect to pop up larger image.
We added shadow effect to that window but it wouldn’t come up in FF.

Is there something we can do to have the same effect in both browsers?

To see what I mean, please visit AMRAY Web Directory

Thanks for taking your time


fastreplies

CSS filters are proprietary to IE. Have a look at;

http://www.mandarindesign.com/opacity.html

http://www.mathertel.de/AJAXEngine/S...hadowdemo.aspx

Thanks Chris but, neither sample will work for us and here is why

This is our page code part

<a class="thumbnail" href="!!url!!" target="_blank">!!thumb!!<span>!!thumb!!</span></a>

and this is CSS

.thumbnail img{
position: relative;
z-index: 0;
border: 1px solid gray;
padding: 0px;
width: 111px;
height: 82px;
}

.thumbnail:hover{
background-color: transparent;
z-index: 1;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
padding: 0px;
width:435px;height:325px;
filter:shadow(color:#333333,strength:12, direction:135);
margin-left: 50px;
visibility: hidden;
}

.thumbnail span img{ /*CSS for enlarged image*/
border: 5px solid brown;
padding: 0px;
width: 400px;
height: 300px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
position: fixed;
visibility: visible;
bottom: 200px;
left: 175px; /*position where enlarged image should offset horizontally */
}


As you can see there is no <DIV> but pure 100% CSS that work like a charm
and all we need is the same kind of elegant solution that we can apply to have shadow
on the right and bottom or around whole image. Good example would be Ask.com


fastreplies

Hi,
you can simple to insert image background. I am insert your small shadow for try and works fine. When you insert right image just carefully change position.

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
position: fixed;
visibility: visible;
background-image: url('http://www.amray.com/images/thumb-bg.gif');
background-repeat: no-repeat;
background-position: 299px 226px;  
bottom: 200px;
left: 175px; /*position where enlarged image should offset horizontally */
}

Shivaji

Thanks Shivaji for your suggestion but...
it's not working. No BG image at all.






fastreplies

Ah, sorry. You wrote "Good example would be Ask.com" and they use bg images.

Shivaji

Originally Posted by shivaji

Ah, sorry. You wrote "Good example would be Ask.com" and they use bg images.

ask.com uses jave and CSS, we're trying to use CSS only

I think we need something that will put BG image below Large Image

.thumbnail:hover span{ /*CSS for background image on hover*/

whereas BG image just slightly larger than principal Image


fastreplies

I think we need something that will put BG image below Large Image

That is exactly what I am sugest to you.
BTW background-image: url( is valid W3 CSS

.thumbnail:hover span{ /*CSS for background image on hover*/

and

.thumbnail:hover span{ /*CSS for enlarged image on hover*/

is the same css definition. Of course you can use separately definition for background.

.thumbnail:hover span{ /*CSS for background image on hover*/
background-image: url('http://www.amray.com/images/someImage.gif');
background-repeat: no-repeat;
background-position: 10px 10px;  
}

Shivaji

Thanx shivaji

With your help and little twicking it's work like a charm



fastreplies

Something else.

How can I make this code cross-browser compatable?






fastreplies