✔ Z-index und dynamische DIVs

[philipp_m]

Hallo,

ich verzweifel gerade an folgender Problemstellung:

Auf der Seite sollen sich verschiedene DIVs nebeneinander befinden:

.project{
float:left;
margin:0px 20px 40px 0px;
}

Die Breite dieser DIVs richtet sich nach der Breite der Bilder, die in das DIV "image" geladen werden.

Allerdings brauche ich ein weiters DIV "hover-effect", das genau so groß ist, wie das Bild und exakt über dem Bild liegt. So funktioniert es einigermaßen, aber das DIV "hover-effect" ist immer ca. 20px länger als das Bild!?

.project{
	float:left;
	margin:0px 20px 40px 0px;
	/*background-color:#F00;*/
}
.project:hover{
	cursor:pointer;
}
.images{
}
.hover-effect{
	position:relative;
	z-index:3;
	top:0px;
	left:0px;
	height:100%;
	background-image:url(../../img/plus.gif);
	background-repeat:no-repeat;
	background-position:center;
}

<div class="project">
    <div class="images">
        <div class="image"><img src="/img/img.png" width="692" height="277"/></div>
        <div class="hover-effect">&nbsp;</div>
    </div>
    <br class="clear" />
</div>

Es wäre klasse, wenn jemand eine Lösung wüsste!

 

[philipp_m]

Problem ist gelöst. Ich lade später eine Beispieldatei hoch.

 

[SpiceLab]

Ich lade später eine Beispieldatei hoch.

"später" ist zeitlich ein doch deeeehnbarer Ausdruck ;-)

 

[philipp_m]

Stimmt. Ich meinte aber eigentlich schon das Später am selben Abend. Ich bin nur nicht mehr dazu gekommen. Hier nun die Datei.