Hallo,
ich bitte um Hilfe
In der Tabelle soll in der vorletzten Spalte die Bilder gezeigt werden. Zur Zeit werden die Bilder in allen Spalten, bis auf die letzte, gezeigt.
Wie kann man das mehrfache Zeigen der Bilder unterbinden.
In dem Beispiel habe ich alle zusätzlichen CSS-Befehle entfernt.
Vielen Dank im Voraus
Gruß
meilott
CSS:
:<#data tr td div div div div cont001 { width:200px; height:22px;margin:0px 2px;}
.cont001 {
width:200px; height:22px;margin:0px 2px;
}
.cont001 img {
position:absolute; top:0; left:0; opacity:0;
}
.cont001:hover img {
-webkit-animation-name: slider; -webkit-animation-timing-function: ease;
-webkit-animation-duration: 20s; -webkit-animation-iteration-count: infinite;
animation-name: slider; animation-timing-function: ease;
animation-duration: 20s; animation-iteration-count: infinite;
}
@-webkit-keyframes slider {
0% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}
20% {opacity:1;-webkit-transform: rotate(0) scale(1) skew(0deg,0deg);}
45% {opacity:0;-webkit-transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
100% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}
}
@keyframes slider {
0% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}
20% {opacity:1;transform: rotate(0) scale(1) skew(0deg,0deg);}
45% {opacity:0;transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
100% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}
}
.cont001 img:nth-of-type(1) {-webkit-animation-delay: 10s; animation-delay: 10s;}
.cont001 img:nth-of-type(2) {-webkit-animation-delay: 0s; animation-delay: 0s;}
.cont001 .hovertext {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
.cont001:hover .hovertext {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
height: 22px;
width: 55px;
}
HTML:
<tr>
<td><div class="innerDiv6">200</div></td>
<td><div class="innerDiv2">2003</div></td>
<td><div class="innerDiv">San Marino</div></td>
<td><div class="innerDiv7">20 C und 50 C</div></td>
<td><div class="innerDiv7"><div class="cont001">
<img src="../picture/ysan2003s02.jpg" alt="../picture/ysan2003s02.jpg">
<img src="../picture/ysan2003s01.jpg" alt="../picture/ysan2003s01.jpg">
<span class="hovertext">Minikit
[/quote]