Member Avatar for Marty1963

I have a gallery of product images in an e-commerce site which the client wants to "pop-out" on rollover.
I wrote this CSS style to do it however while it works fine in Firefox .. not so in IE10.
Can anyone suggest a work-around with this code that will support cross browser?
Any help would be much appreciated.

<style type="text/css">

#btnProduct{
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;  
}
#btnProduct:hover{
    -webkit-transform: scale(1.06,1.06);
    -moz-transform:scale(1.06,1.06);
}
</style>

And on each image:

<a href="#"><img src="images/SC-Brand-buttons_30.png" width="200" height="193" border="0"  id="btnProduct" onMouseOver="mOver(this);" onMouseOut="mOut(this);"/></a>
  • 3 Contributors
  • 11 Replies
  • 415 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Brief summary: the symptom usually comes from IE running in quirks/compatibility mode (missing doctype or an X-UA-Compatible header) or from animating the image’s box so the layout reflows. As pointed out, make sure the page is in standards mode. As suggested, use a class for repeated items instead of reusing an ID.

A robust pattern that prevents neighbors from being pushed is to give each image a fixed-size inline-block wrapper and animate only the image inside it (translate/shadow/fade) so the wrapper’s layout size never changes. Example markup and CSS:

<div class="product">
  <a href="#"><img class="product-img" src="images/example.png" alt=""></a>
</div>
.product {
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: visible; /* allow visual pop-out without changing flow */
}

.product-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.7;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
}

.product:hover .product-img {
  transform: translateY(-6px);       /* visual "pop" without changing wrapper size */
  box-shadow: 0 10px 18px rgba(0,0,0,0.25);
  opacity: 1;
}

Troubleshooting checklist: confirm a valid DOCTYPE at top (<!DOCTYPE html>), check IE’s F12 Emulation/Document mode and remove any X-UA-Compatible header forcing older modes, clear the browser cache, and replace inline onMouse handlers with CSS hover for clarity. Vendor prefixes are rarely needed when IE is in standards mode, but prefixes can be added if older builds must be supported.

The wrapper approach preserves layout across browsers and keeps the gallery stable while allowing a smooth pop-out effect; it also addresses the pushing issue observed by while building on the doctype and class suggestions from and .

Recommended Answers

All 11 Replies

Member Avatar for almostbob

not reading the question, javascript was not the answer, edited out wrongness

Edited by almostbob
Member Avatar for JorgeM

You can use add the vendor prefix for IE. For example, for IE 10, the transform will not work until you add the -ms prefix.

    -ms-transform: scale(1.06,1.06);
Member Avatar for Marty1963

Thank you "almostbob" for your quick reply.
That's close, however is there any way to stop the scaling of one image from moving the position of the other images in the gallery (like Firefox does) or is that some we'd have to live with to make it function in IE?

Member Avatar for JorgeM

I just tested the code above with a few images, including the -ms prefix on the transform and did not observe the images being pushed by the image that was hovered. I tried this on IE 10. When I hover over an image, the image scales as expected, but the other images that surround it do not move.

Do you have a link to where your page is located to see it? Code on jsfiddle?

Member Avatar for Marty1963

Thank you Jorge. Good idea, but didn't seem to make any difference. It seems IE can not 'see' the scale at all. Another reason to dislike IE!

Member Avatar for Marty1963

Sorry Jorge the issue with the pushing images was in responce to "almostbob's" revised code suggestion where width and height values were applied to the onMouseOver and onMouseOut image calls.

I have a very crude test page built with filler text and one repeated image: http://www.popeyescanada.com/sc-test.html

Member Avatar for JorgeM

Ok, I see another thing that is adding a problem here. You did not include a doctype at the top of the document. When IE does not see the doctype, it goes into quirks mode. When i forced the browser to go into standards mode, i did observe that the "pop-up" effect was working.

To add a doctype, the first line of the document should have this...

<!DOCTYPE html>

This instructs the browser (especially IE) that it should follow standards mode and to expect an HTML5 doc.

By the way, i dislike IE as well. Most people that develop eventually do.

Edited by JorgeM
Member Avatar for Marty1963

How embarrassing! In my effort to cut corners and make a quick 'n dirty test page I neglected to include the doctype!

I've corrected it but still see no change.

Member Avatar for JorgeM

hmmm..

I just tested the site using IE10 on Win 8 and all of the boxes had the rolloever effect, at least the effect of scaling out without affecting the neighboring images. Same result on Chrome and Firefox.

Member Avatar for Marty1963

If you are seeing it on IE10 then that's good enough for me. Tests fine for me on Firefox and Chrome. Could be a IE cashing thing on my end.

Thank you SO much for your help Jorge. It is very much appreciated.

Member Avatar for almostbob

do all those images really have the same ID?
multi-items should be class
given the images are all the same size
can it be done in css as

#btnProduct{ -webkit-opacity: 0.5; -moz-opacity: 0.5; width:200px; height:193px; }
#btnProduct:hover{ width:212px; height:205px; }

as class

.btnProduct{ -webkit-opacity: 0.5; -moz-opacity: 0.5; width:200px; height:193px; }
.btnProduct:hover{ width:212px; height:205px; }
Edited by almostbob
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.