Using menu image, but hover image pushed to the back

[makamminga]

Hi there,

I hope you can help me.

I have the standard menu in joomla 3.x and added an image to be used for the menu item.
The next step was to create an hover effect to that menu item, but it's pushed behind the menu image.

Here is the css I used:

Code: Select all

#navigation .menu > li.item-114 > a:hover, 
#navigation .menu > li.sfHover > a, 
#navigation .menu > .active > a, 
#navigation .active > a:hover, 
#navigation .active > a:hover { 
	z-index:1040;
	-moz-box-shadow: 0 0 10px #ccc; 
	-webkit-box-shadow: 0 0 10px #ccc; 
	box-shadow: 0 0 10px #ccc;
	background-image:url("../../../images/frontpage/ooo.png");
	background-repeat:no-repeat;
    background-position: center left;
	display:block;
	}

The z-index does not get applied succesfully and even when set to 999999 it does not work.

The hover image is pushed behind the menu image.

Can somebody shine a light on this?

Kind regards

Martijn

[kanor]

can you provide a link to the site?

[makamminga]

Hi Kanor,

I've send you a PM for login details.

Thanks in advance.

Martijn

[kanor]

hey, took a look at the setup ... but m not sure what the final output should be but i felt there could be a better way to achieve that

... the reason the hover image is pushed behind the menu image, is because that it is applied to the background of the parent anchor
so, you should remove the z-index on the anchor [ie, from the code in your first post] and apply a negative z-index to the child span element

Code: Select all

#navigation .menu > li.item-114 > a:hover span {position: relative; z-index: -1;}

[makamminga]

Hi Kanor,

Spend another 2,5 hours trying to make sense of it all. Your code has not reached the desired effect, and all possible configurations i've tried did not help either.

Would you be so kind to have another look?

Can I point you to the first image (baby) in the content? That's also a menu based on an image in the linktype and on a:hover it also has no effect. That part i'm most interested in, but it's nearly the same configuration, except it has another class which is minimum defined. Only the .item-150 a en .item-150 a:hover

I've tried to remove the linktype image from the menu and put it in the css code (that could be a solution), but then again, the image does'nt show up and very likely not clickable I guess.

You can tell by the css which code has to come up in the front.

Code: Select all

.item-150 a {
	z-index:2;
	-sand-transform: rotate(6deg);
	position:absolute;
	left:5px;
	top:30px;
	font-size: 0px;
	}

.item-150 a:hover  {
	z-index:3;
	opacity: 0.8;
	-moz-box-shadow: 0 0 10px #ccc; 
	-webkit-box-shadow: 0 0 10px #ccc; 
	box-shadow: 0 0 10px #ccc;
	background-image:url("../../../images/frontpage/baby_actie.png");
}

[kanor]

ok, the changes i suggested should work with the navigation menu but for the image icons below, there will be an issue since you have used transform on the anchor

the transform gives its own stacking order to the anchor and our desired result is not achieved ... one work around this would be to give the transform to the parent li
so your code should be something like ...

Code: Select all

.item-150 {transform: rotate(6deg);}

.item-150 a {
    position: absolute;
    left: 5px;
    top: 30px;
    font-size: 0px;
} /* removed z-index */

.item-150 a:hover {
    background-image: url(...);
    opacity: 0.8;
    box-shadow: 0 0 10px #ccc;
} /* removed z-index */

.item-150 a:hover > span {
    position: relative;
    z-index: -1;
}

i think this should do it, ie, if i havent missed any code

another way could be using opacity like

Code: Select all

.item-150 a:hover > span {opacity: 0;}

... and we need not worry about the z-index ordering

one more way, and the simplest way would be to modify the generated menu structure using template overrides and apply the link-image to the anchor as the background, then all you need to do it is override the bg with the css using !important or just create a sprite and change the background position
... or you can handle everything from the css without the need to upload any images from the backend

[makamminga]

Dear Kanor,

I've tried, tried and tried another set of combinations. I honestly cannot get it to work.

What is your suggestion for the css trick and being able to use the image as the menu and be clickable and hoverable?

Like to hear from you if you're willing to help me out.

Kind regards,

Martijn

[kanor]

ok ... for the css thing you can do something like this

Code: Select all

.imgmenu li a {
    width: 100px;
    height 150px;
    display: block;
}
.imgmenu li a.baby {
    background-image: url(...image...);
    background-repeat: no-repeat;
    background-position: 0 0;
}
.imgmenu li a.baby:hover {
    background-image: url(...image-on-hover...);
}

this is considering that all you images have the same width and height
... you can remove the text coming from the menu title using text-indent and add the extra effects of box-shadow and all

try such a setup and lemme know if it works out

[makamminga]

Hi Kanor,

Thank you many times for advising me!

I've succeeded with the following code in which you put me in the right direction:

Code: Select all

#portfolio li.item-150 a {
	-sand-transform: rotate(6deg);
	position:absolute;
	width: 175px;
	height: 214px;
	left:5px;
	top:30px;
    background-image: url("../../../images/frontpage/baby.png"); 0 0 no-repeat;
    background-repeat: no-repeat;
    background-position: 0 0;
    z-index:2;
}
#portfolio li.item-150 a:hover {
    background-image: url("../../../images/frontpage/baby_actie.png"); 0 0 no-repeat;
    z-index:3;
}

Where the menu has the class portfolio and the suffix _portfolio or vice versa

With all the hours i've spend on this 'extra' and you offcourse, this was a fast and simple solution.

Many thanks from Holland!

Wish you the best!

[kanor]

your welcome, glad it worked out for you!
thxx