CODEWITHSUNDEEP
css
Daniel
Daniel

Reputation:

CSS Showing image when hovered over 2 other images

I'm rendering an image over another image (the first image is an avatar and the second is a frame for it) with divs and background-image style property. The problem is I also want an image to appear over all 2 of them when user hovers his mouse on them. I've played with z-index for over 2h now and I can't get it to work. Either the hover works 50% of the time(because z-indexes are the same for hovering and the avatar) or the avatar shows up only when the hover can also be seen. One of the codes I've tried(avatar shows only when hoverimage is also visible):

echo "<div style=\"display:inline-block; width:81px; height:65px;\">";
echo "<div style=\"display:inline-block; position:relative; z-index:2; top:2px; left:17px; width:47px; height:47px; background:url('$avatarpath')\"></div>";
echo "<div style=\"display:inline-block; position:relative; top:-47px; z-index:3; left:15px; width:51px; height:51px;\" class=\"pportraita\"></div>";
echo "</div>";

CSS:

    .pportraita {
position: relative;
z-index: 1;
background: url('../img/matchpage/bg_memberavatar.png') bottom no-repeat;
    }

.pportraita:hover {
position: relative;
z-index: 1;
background: url('../img/matchpage/remove.png') bottom no-repeat;
    }

bg_memberavatar.png is the frame, remove.png is the image I want to show only when hovered. How to do it?

Upvotes: 0

Views: 165

Answers (1)

ptriek
ptriek

Reputation: 9276

I guess this is more or less what you need?

http://jsfiddle.net/h36au/

You're using relative positioning on all your elements, whereas absolute positioning is what you need.

  • Relative means the element is taken out of the page layout, but it's dimensions keep influencing the layout - and its position will influence absolutely/relatively positioned child elements.

  • Absolute means the element is completely taken out of the layout, and positioned absolutely to the window - or (if present) the first positioned parent element, the latter is what I used in my example.

Hope you understand a bit what is going on in the code...

Upvotes: 1

Related Questions