Problem mit überlappenden Bildern

JimiJones · 1 April 2011

[Gelöst] Problem mit überlappenden Bildern

Hallo, ich würde gerne auf meiner Seite Thumbnails für Youtube Videos als Link zum Video nutzen. Damit der User erkennt, dass es ein Video ist, wollte ich einen "Play" Button davor legen(Um dies bei neuen Videos nicht immer im Bildbearbeitungsprogramm zu machen wollte ich es in css lösen). Mein Problem ist, dass der Playbutton hinter dem Bild angezeigt wird.
Kann mir jemand sagen was ich hier falsch mache?

HTML:

<html>
<head>
<style type="text/css">
.video { position: relative; }
.video a {
   position: absolute;
   display: block;
   background-image: url('#meinbutton#');
   height: 47px;
   width: 46px;
   top: 25px;
   left: 43px;
   z-index: 100;
}
</style>
</head>
<body>
<div class="video">
<a href="#"><img src="http://img.youtube.com/vi/4P0Rbe1ASuQ/3.jpg" style="position:absolute; left:5px; z-index:20;" /></a>
</div>
</body>
</html>

JimiJones · 1 April 2011

Falls es jemanden interessiert, so funktioniert es.

HTML:

<html> 
<head> 
<style type="text/css"> 
.video a { position: relative; } 
.video a:after {
    content: url('meinbutton.png');
    position: absolute;
    /* weitere Angaben */ 
} 
</style> 
</head> 
<body> 
<div class="video"> 
    <a href="#"><img src="http://img.youtube.com/vi/4P0Rbe1ASuQ/3.jpg" /></a> 
</div> 
</body> 
</html>

Problem mit überlappenden Bildern

JimiJones

Neues Mitglied

JimiJones

Neues Mitglied

Neueste Beiträge