HELP, How do I get images on the front !

[prytherch]

I have just built a site from a purchased template, the siet is http://www.capitalblack.co.uk/template but I want to put images where the six grey panels are on the front, ive managed to change the ones as you hover but I cant figure out how to change the css so that I can have images on the front, can anyone help ? the images are in images/image1.jpg, image2 etc

Thank you so much
Linda

[joshuanhibbert]

This is what you are looking for:

.cc_submenu ul li {

position: absolute;

width: 165px!important;

height: 556px!important;

z-index: 1000;

left: 0;

top: 0;

background: url(../images/spacer.gif) top repeat;

cursor: pointer!important;

}

In particular, this line:

background: url(../images/spacer.gif) top repeat;

Change that to the path of the image you want. You will have to do that for each, and will also want to use the following selector structure:

#cc_menu .itemX .cc_submenu ul li { ... }

Where X is the number of the panel (1 through to 6).

[Billy]

It’s actually using an image (as in &lit;img src=”image1.jpg”>)
This image is pushed it’s width to the left (-165px), but when hovered on it moves to 0px left margin. What you need to do is add another picture, absolutely position it and give it a lower z-index so that the other slides over it.

HTML:

CSS:

img.image-front {

position: absolute;

left: [whatever value you need to get it in the right place];

z-index: 5000;

}



img.image-back {

position: absolute;

left: -165px; [that's what it is at the moment]

z-index: 10000;

-webkit-transition: left [duration wanted];

[all other transitions];

}



img.image-back:hover {

left: 0;

-webkit-transition: left [duration wanted];

[all other transitions];

}

[Author]

Posts