button image zooms over header

[Manganix]

Hi,


when I scroll the page down a bit, half-way till the image button, and hover over the image button, the picture zooms in/out and comes over / in front of the header bar?

Does anyone have an idea what could be going wrong? Thanks for your feedback.

http://www.gamanga.com/Index2.html

 

[chrishirst]

"the image button" being???


And what browser(s) does this problem manifest itself?

 

[Manganix]

"the image button" being???

3 images with zoom effect on the page ... hard to look over ...

And what browser(s) does this problem manifest itself?

chrome, ff & ie


Thanks for the tips...

 

[chrishirst]

But there are no images that 'zoom'. As in, increase in size or change to focus on a smaller area of the same, that I can see. There are some images that use a focal distance transition to change the image, but they do nothing to overlap any other elements.

Have you flushed your browser cache (Ctrl+F5).

 

[Manganix]

I tried ctrl+f5 in all browser, but didn't help.

There are some images that use a focal distance transition to change the image, but they do nothing to overlap any other elements

maybe technically they don't do anything to overlap other elements, but as you will see clearly in the yellow circle in the picture below, when hovered over it, the image zooms/grows/transitions... over and in front of the header and the header title.

could it be something fancybox-related or the transition css? (just a suggestion)

<a class="various fancybox.iframe" title="Ninja Gaiden 3: Razor's Edge - Weapon Demonstration - Lunar Staff (MAX. LEVEL) [HD]" href="http://www.youtube.com/v/xY1v7m2l3nQ?fs=1&amp;autoplay=1">
<div class="quadradoHOME imgzoomHOME" style="background: url(IMAGES/BUTTONS/NG3RE/lunarStaffDemo_dark.jpg) no-repeat center center; "><!-- Hover -->
<img class="testeHOME" src="IMAGES/BUTTONS/NG3RE/lunarStaffDemo.jpg"/><!-- Capa -->
</div>
</a>

.quadradoHOME { /*image/button square*/
   width: 280px;
   height: 200px;
   margin: 0px;
   float: left;
   overflow: hidden;
   /*position: relative;*/
   text-align: center;
   cursor: default;
   margin: 8px 8px 0px 8px;
   border: #666 solid 1px;
   box-shadow:#000 1px 1px 1px;
}
.quadradoHOME:hover { /*image/button square*/
   width: 280px;
   height: 200px;
   margin: 0px;
   float: left;
   overflow: hidden;
   /*position: relative;*/
   text-align: center;
   cursor: default;
   margin: 8px 8px 0px 8px;
   border: #ED2F52 solid 1px;
   box-shadow:#000 1px 1px 1px;
}
.imgzoomHOME img.testeHOME { /*zoom animation*/
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}	
.imgzoomHOME:hover img.testeHOME { /*triggers zoom animation when hovered over*/
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   /*cursor:pointer;*/
}

 

[chrishirst]

If you are talking about the temporary overlap during the transition, it's because of the position: absolute; and the stacking order.

 

[Manganix]

that's right, the temporary overlap during the transition.

it's because of the position: absolute;

but the positioning isn't applied?

/*position:relative;*/

I've also tried all settings of the positioning, nothing helps. Absolute & realtive even put the images in front of the header completely as it is. The rest screw the position of the buttons.

and the stacking order

what would you suggest as a solution, for both of your remarks? Thx.

 

[Manganix]

I don't know what you would suggest, but I've tried the following:

I've given the header div a higher z-index than the div containing the imagebuttons ... seems to work: the images don't (temporarely) overlap the header/title anymore during the transition.

Problem seems to be gone 100% in Firefox, BUT in Chrome, during and the transition doesn't overlap anymore the header container = OK, but it makes the title "GAMANGA" tremble / temporarely shapeshift (only the title, the navigation buttons don't have this problem)?

http://www.gamanga.com/Index2.html

 

[chrishirst]

that's right, the temporary overlap during the transition.



but the positioning isn't applied?

/*position:relative;*/

given that it is commented out, ... How could it.

I've also tried all settings of the positioning, nothing helps. Absolute & realtive even put the images in front of the header completely as it is. The rest screw the position of the buttons.

Just as it would.

You should learn what positioning REALLY IS, http://webmaster-talk.eu/en/articles/8-website-development-and-design/13-css-positioning
Positioning is NOT about x and y but about the third dimension of Z.

I don't know what you would suggest, but I've tried the following:

I've given the header div a higher z-index than the div containing the imagebuttons

Correct.

 

[Manganix]

ok thanks, but do you (anyone else?) see this problem too or is it just me?

in Chrome, during and the transition doesn't overlap anymore the header container = OK, but it makes the title "GAMANGA" tremble / temporarely shapeshift for a sec ... in Firefox / Safari / IE this problem doesn't occur

it only happens when I put the z-index in the header container ... does chrome have issues with this setting?


thanks for checking it out ;-)

 

[chrishirst]

it only happens when I put the z-index in the header container ... does chrome have issues with this setting?

Not especially, when it is used correctly and appropriately of course.

And the "flashing" is because the transition is is changing the stacking order of the images during the change cycle so setting the z-index of the logo ALSO needs increasing, z-index is not an inheritable property, so the value applied to the banner is not necessarily applied to the logo image without being declared explicitly.


Also ... IF you are going to use a XHTML DTD you really should get rid of the <center> element ... That element has been deprecated for almost FIFTEEN YEARS in any DTD.


And to make z-index work correctly the element it is applied to MUST be positioned other than static, so MainTitle needs to have
position: relative; and z-index: 10000;

And MainTitle a needs to inherit both position and z-index

 

[Manganix]

Also ... IF you are going to use a XHTML DTD you really should get rid of the <center> element ... That element has been deprecated for almost FIFTEEN YEARS in any DTD.

check!


Works fine now, THANKS! ;-)