CSS :hover and multiple image layers

[jumanji]

I’m fairly basic when it comes to CSS, but have been battling with this one. Hopefully someone out there can assist. (I only want to use CSS no js, jquery etc as I’m completely lost there.) I’ve scoured the net trying to find an answer …

I have a set background which changes on refresh.
On top of this I have a logo (image1) [whole page, mostly transparent png] which I want to change to another image (image2) [whole page mostly color, some transparent cutouts] on hover. I can achieve this easily using :hover or sprites.

My quandry comes is that above (in front of) this image2 I want more images (image3 – small icons) which are my menu items. I want to be able to click these (which on hover fade to transparent to show more cutouts).

My biggest problem is that even creating CSS buttons instead of images, as soon as I hover over these I lose my “hover” over image2, which then reverts to image1 (the image2 opacity=0 when not hovered).

Is there any CSS way to maintain the inage2 hover whilst hovering over these new images in front of image2? At the moment I am losing the image2 hover because of the image3 hover.

If I can achieve this, I believe that I can get the effect I want – which is fade outs to transparency of menu buttons. Effectively I want to be able to hover and have the solid image fade to a cutout (using opacity and the cutout behind).

Here is some sample code (bad, I know) …

–HTML–
– NavBar-
div class=”menu”
img class=”navBar” src=”images/menu-sprite-V.png”

–CSS–

#menu {
position: relative;
float: right;
width: 530px;
height: 1800px;
top: 900px;
overflow: hidden;
z-index: 2;
}

.navBar {
position: relative;
background-image: url(images/menu-sprite-V.png) top right;
height: 1800px;
top: -900px;
opacity: 1;
overflow: hidden;
z-index: 2;
}

.navBar:hover {
opacity: 1;
top: 0px;
overflow: hidden;
z-index: 2;
}

.navButton {
list-style: none;
background: #FFFF00;
opacity: .5;
filter:alpha(opacity=100); /* For IE8 and earlier */
z-index: 4;
-webkit-box-shadow: 2px 2px 3px #1f1e1f;
-moz-box-shadow: 2px 2px 3px #1f1e1f;
box-shadow: 2px 2px 3px #1f1e1f;
-webkit-border-radius: 6px 2px 6px 2px;
-moz-border-radius: 6px 2px 6px 2px;
border-radius: 6px 2px 6px 2px;
text-shadow: 0px 2px 4px #000000;
padding: -4px 0px 0px 0px;
position: absolute;
display: block;
left: 292px;
top: 120px;
text-transform: lowercase;
text-align: left;
line-height: 38px;
font-family: 3;
font-size: 16px;
color: #000000;
font-weight: bold;
width: 100px;
height: 188px;
}

>>
navButton could be replaced by an image (preferable) which I can play with the opacity. This code was generated by a CSS button generator and I was just playing around. Will tighten it up for the image version.

Can anyone come up with a solution for the hover on hover ? Image maps maybe ??

Thanks.

[jumanji]

Hi Paulie_D,
No my menu is not 1800px tall, that’s the sprite image I’m using. My page is 900px high (2 image states, hence 1800px).

Here is a link to what I’ve got:
http://bantus.asn.au/ab3g56fdr786mh/test/testSPR2.html

I though it might be a bit hard to wrap your head around from just my description. Hope this helps.

The words on the yellow pop up image are supposed to be my menu items. I wanted to have images over the top of these words that fade out to show the cutouts of the yellow image on hover of them.

[jumanji]

I have heard of using :before and :after pseudo classes on an element to get extra layers of images … would this work ? (and how?)

[jumanji]

Thanks, but …

I guess the crux of my question was:
is there a way no to lose the :hover on image2 (ylw bg) when trying to select the menu items (via image map?) ??

[jumanji]

Here are the three sample images of the states I am after:
>>page load: normal page load
>>mouse over the logo on left: mouse over
>>and mouse over a menu item: mouse over menu item

Hope these help. The problem I am encountering is that I lose :hover of the ylw image when I hover the menu items.

I actually thought of maybe making the space on the right a transparent image which on :hover shows logo png on left, then without hover (which would mean the mouse is over the left) would show the ylw cutout image.

This could then allow me to have not hover state true for any action on the left side of the page … leaving me open to fade out the menu items on their particular :hover.

[jumanji]

Yeh that’s the way I’m thinking for the menu items. Thanks.

I’ve moved away from the sprites for the main menu idea, as it seems easier to just do a remote rollover concept.

So my initial “hover problem” for the first menu I may have fixed HERE and below (code). Only issue is there’s LOTS of flickering and I’m not sure which part of my code is responsible for this.

The faded red is my “transparent” png which is used to trigger the actions. I’ve shaded it for clarity. I can’t work out why it flickers, and also why some of the time the red moves to the right hand side of the page (should be on the left only.

HTML

















 

CSS

/*  NavBar  -  hover over to get YLW menu box and menu options  */



#menu-wrapper {

width: 100%;

height: 900px;

margin: 0 0;

position: relative;

overflow: hidden;

}



#menu-wrapper a {

display: block;

width: 100%;

height: 900px;

position: absolute;

top: 0;

right: 0;

}





#offMenu {

display: block;

position: absolute;

right: 530px;

width: 100%;

height: 900px;

z-index:1;

}



#offMenu :hover {

display: block;

position: absolute;

right: -530px;

width: 530px;

height: 900px;

z-index:2;

}



#offMenu span {

background-image: url(images/transparent.png);

width: 100%;

}





.noNav{

position: absolute;

background-image: url(images/bantus-bg-name.png);

right: 0px;

top: 0px;

z-index: 2;

}



.navBar{

position: absolute;

background-image: url(images/menu-cutout.png);

right: 0px;

top: 0px;

z-index: 2;

}

What do you think ??

[standuncan]

Ok this bugged me a little bit, so I did a quick test and this is what I would try out. First plug this in to a page to test it out and see how it works.

Bantus


Hiring Us

div#menu {

display:block;

width:500px;

height:500px;

background:none;

}

div#menu:hover {

background-color:#FFFF00;

}

div#menu ul li a{

display:none;

}

div#menu:hover ul li a {

display:block;

color:#000000;

}

div#menu:hover ul li a:hover {

color:#FF0000;

}

Then just replace the a tag colors with small images. Th regular image should be yellow background with black text and the Hover image should have yellow background with cutout text. Also don’t forget to text-indent your markup when using the images, or wrap the markup in a span tag and display the span as none. Hope that makes sense.

div#menu:hover ul li a {

display:block;

}

div#menu:hover ul li a#bantus {

background-image:url(images/bantus.jpg);

}

div#menu:hover ul li a#bantus:hover {

background-image:url(images/bantusHover.jpg);

}

[halwits2011]

this code is amazing so thanks for share with me.

[jumanji]

Hi standuncan

Thanks SOOOOOO much. Your coding helped me heaps … I think I was over thinking the way I was trying to achieve it too much.

Here’s a link to the finished page. (The links aren’t done yet, but now I ‘ve knocked this off that’ll be easy :)

Fading images on :hover menu

[standuncan]

Glad you are getting it now. Remember an ID can only be used once, classes can be used many times. Remember to use a validator to help check your code. They aren’t the end-all be-all of making sure everything is correct, but they are great to help remind you of little things here and there.

Oh also, I would insert those images in the nav through CSS instead of in the markup, so you don’t have to use any type of javascript to pre-load the images.

[Author]

Posts