nicht angemeldet
sry LX,
das #div {hight=200} hab ich auf die schnelle geschrieben *g*
aber dafür hier mal etwas kompliziertes ... hab die halbe Nacht dran gesessen,
um das alles zu finden, verstehen und irgendwie zusammen zu schustern.
Ich muss zugeben, ich mochte nie CSS ... aber jetzt ... jetzt macht es endlich Sinn
und was wichtiger ist Spaß.
Das Code am Besten mit nem iPhone, Safari oder Opera ausprobieren.
Und mit der Maus über die Screens gehen.
viel Spaß
und danke nochmal für die Tips nach was ch suchen muss -:)
Gruß
Tolonath
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
body {
background-color: #e3e3e3;
margin: 25px auto;
}
table { width: 100%; height:100%;
}
.zoom {
position: relative;
background-image: url(http://s7.directupload.net/images/110131/5uexi3p7.gif);
background-repeat: no-repeat;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
-webkit-border-radius: 38px;
border-radius: 38px;
border:1px solid #333;
-webkit-box-shadow: 0.3em 0.3em #CCC;
-moz-box-shadow: 0.3em 0.3em #CCC;
box-shadow: 0.3em 0.3em #CCC;
width: 75px; height: 75px;
-webkit-border-radius: 38px;
-o-border-radius: 38px;
border-radius: 38px;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
transition: 2s;
z-index:1;
}
.zoom:hover {
width: 150px; height: 150px; position: relative; top:-38px;
-webkit-border-radius: 75px;
border-radius: 75px;
}
.schicht:hover {
z-index:100;
}
.fenster { width: 150px; height: 150px; position:relative;
}
</style>
</head>
<body>
<table><tr valign="middle"><td align="center">
<div class="fenster" ><div class="zoom schicht"></div></div>
<div class="fenster" style="top:-70px;" ><div class="zoom schicht"></div></div>
<div class="fenster" style="top:-140px;" ><div class="zoom schicht"></div></div>
</td></tr></table>
</body>
</html>
JürgenB
Gunnar Bittersmann