CODEWITHSUNDEEP
htmlcss
Matthcw
Matthcw

Reputation: 131

Overlapping elements Div elements

Div containaer and p element overlapping another Div that contains an image that needs to respond to a :hover CSS event causing only a small portion of that Div container to be able to sense the mouse hovering over it.

Here Is The JSFiddle.

Upvotes: 0

Views: 104

Answers (4)

Pevara
Pevara

Reputation: 14308

As @colandus said adding the position: relative and the z-index to the img should indeed do the trick.

However, it seems to me like you are over complicating things a bit. Why the position relative on the p? that is the one that is causing the problem...

What you are trying to do is default behavior if you use some simpler html / css. Something like this:

the HTML with some div's removed:

<div class="insp">
    <h3>Thomas Edison</h3>
    <img src="http://www.placehold.it/250x150">
    <p>Lorem Ipsum is s...</p>
</div>

and the css with the position: relative removed from the p:

.insp {
    border: 2px solid black;
    margin: 10px 0px;
    padding:10px;
}
.insp h3 {
    margin-top:0px;
    background-color:#FFDE5C;
}
.insp img {
    float:left;
    border: 5px solid #FFDE5C;
    height:150px;
    margin: 0 20px 20px 0;
}
.insp img:hover {
    border: 5px solid #ffffff;
}
.insp p {
    margin: 40px 40px 40px 80px;
}

And as you can see (http://jsfiddle.net/7fvcD/4/), it looks exactly the same and there is no hover issue anymore.

Upvotes: 4

sebastian
sebastian

Reputation: 17368

Add the following CSS:

.insp-image img {
    position: relative;
    z-index:1000;
}

http://jsfiddle.net/7fvcD/5/

Don't need to change your markup ;)

Upvotes: 1

Antonis Grigoriadis
Antonis Grigoriadis

Reputation: 2080

Try this approach: Put the <div> with the <img> inside the <p> tag and set some margin to the img div.

Updated JsFiddle

Upvotes: 0

N&#228;bil Y
N&#228;bil Y

Reputation: 1660

Put image as position: relative, then z-index will work.

Upvotes: 3

Related Questions