HTML/CSS [gelöst] Probleme beim Bilder darstellen..

[mydoys.de]

Hi JUngs, vielleicht kann mir von euch einer Helfen..

Es geht um ein Darstellungs Problem..

Ich möchte gerne das wenn man mit der Maus über das Foto geht das Foto größer dargestellt wird hier zusehen : https://www.spaetshops.de/Emma_No1.html

Es Funktioniert eigentlich nur wird es nicht ganz angezeigt ....


HTML CODE:

<div class="polaroid">
	<div id="box">
		<a href="#">
			<img src="https://www.spaetshops.de/shop_bilder/emma_no1.png" alt="- Emma No1 -" title="- Emma No1 -" border="0"></a>
				<div><p><img src="https://www.spaetshops.de/shop_bilder/emma_no1.png" width="400" height="400" alt=""></p></div>
	</div>

Das CSS dazu:

img {
border:none;
}

#box{
color: #595959;
height:auto;
width:250px;
padding:0;
margin:0px;
}

#box div{color: #595959; display:none;}

#box:hover div{
display:block;
width:450px;
position:absolute;top:-100px;left:-200px;
padding:15px;
}


div.polaroid {
    width: 250px;
    background: #CFCFCF;
    padding: 10px;
    margin-bottom: 0px;
    margin-left: -20px;
    margin-right: 0px;
    margin-top: -20px;
    box-shadow: 0 0 10px #666666;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);


}


div.polaroid img {
    width: 97%;
border:3px solid #F3242F;
}

 

[eaxo]

Holla, was für eine breiige Angelegenheit. Aber gut, ist ja deins...


Du sagst dem Browser das das Bild in der 3. Spalte deines (Bootstrap?) Konstrukts angezeigt werden soll.

<div class="widget-head col-md-3">
[..]
</div>

 

[mydoys.de]

Holla, was für eine breiige Angelegenheit. Aber gut, ist ja deins...


Du sagst dem Browser das das Bild in der 3. Spalte deines (Bootstrap?) Konstrukts angezeigt werden soll.

<div class="widget-head col-md-3">
[..]
</div>

#box:hover div{
display:block;
width:450px;
[B]position:absolute;top:100px;left:200px;[/B]
padding:15px;
}

Das Fett geschriebene geänder, es bewegt sich, nur ein Problem.. das Bild ist im Hindergrund ... ich habe versucht einen z-index:1; einzufügen... klappt nicht..

wie bekomme ich das bild denn in den Vordergrund ?

 

[mydoys.de]

gelöst !


Lösung : div.polaroid auf z-index:10;

 

[Smssam]

gelöst !


Lösung : div.polaroid auf z-index:10;

Funktioniert leider nicht mit dem Chrome Version 46... Da vergrößert sich das Bild zwar, ist aber dennoch im Hintergrund.

 

[mydoys.de]

Funktioniert leider nicht mit dem Chrome Version 46... Da vergrößert sich das Bild zwar, ist aber dennoch im Hintergrund.

Danke, sehe ich mir dann mal an ..