CODEWITHSUNDEEP
htmlcssimage
Jimmy
Jimmy

Reputation: 285

Placing an image over another image

I have an image like such:

and would like to when i hover, to get another Transparent image on TOP of it. this is the css:

#imagebox {

Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
}

#imagebox:hover {
background: url("upplyst-platta.png") no-repeat 0 0;
}

But it is behind the picture, any way to solve this in css? or i have to fix it with javascript? The image on bottom is generated from db(later on) and cannot be set in css

EDIT: I saw this solution: http://jsfiddle.net/bazmegakapa/Zf5am/ but cannot get it to work. even though i copy the whole code, what can be the problem?

Upvotes: 0

Views: 552

Answers (3)

NGLN
NGLN

Reputation: 43664

Hope this works for you or provides some inspiration: jsfiddle example #1

Update based on first comment: Do you mean like this? jsfiddle example #2

2nd update based on edit in question: Well, the reason for not working is that the hoverimage isn't just transparent: it's a modification of the original. But it clarifies your wish. I really think my first example is the solution you're looking for. Just replace the url in the style sheet with your transparent png file name.

Upvotes: 0

kstev
kstev

Reputation: 740

Use the z-index to state which order the elements are drawn in. You can find more information here: http://www.w3schools.com/css/pr_pos_z-index.asp

A few other things as well, you might want to add relative image placement based on the parents position and where you say Width in the first style, it should be all lowercase width :-P

Hope this is what you are looking for.

Upvotes: 2

Yman
Yman

Reputation: 934

#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
background: url("upplyst-platta.png") no-repeat 0 0;
}
 #imagebox img{
display: none;
}
#imagebox:hover img{
display: block;
}

and the html structure should be:

<div id="imagebox"> <img src="iWantToShowThisImage.jpg" /></div>

Upvotes: 0

Related Questions