Hallo Ihr Wissenden,
erst einmal einen Gruß vom Rande Berlins - bin völlig neu hier.
Ich habe eine Slideshow die wunderbar funzt. Und immer wenn ein neues Bild kommt soll die Beschreibung der Bilder so schön einfliegen.
wenn Ihr euch die CSS Datei anseht, habe ich die Zeilen mit :hover auskommentiert und eine neue Zeile ohne :hover eingefügt.
Mit :hover funzt die Animation ohne :hover funzt die Animation nicht mehr.
Hat jemand eine Idee? Danke schon mal.
HTML sieht so aus:
HTML
<div id="slider">
<ul class="rslides">
<li><figure><img src="<?php echo $tpath; ?>/images/slide0.jpg" alt="Webdesign_Style"><figcaption><h3>Überschrift 1</h3><p>Text Text Text.</p></figcaption></figure></li>
<li><figure><img src="<?php echo $tpath; ?>/images/slide0.jpg" alt="Webdesign_Style"><figcaption><h3>Überschrift 2</h3><p>Text Text Text.</p></figcaption></figure></li>
<li><figure><img src="<?php echo $tpath; ?>/images/slide0.jpg" alt="Webdesign_Style"><figcaption><h3>Überschrift 3</h3><p>Text Text Text.</p></figcaption></figure></li>
</ul>
</div><!-- End id=slider -->und CSS
Code
figure {
margin: 0;
padding: 0;
/*height: 543px;
width: 810px;*/
max-width: 800px;
height: auto;
position: relative;
display: block;
cursor: pointer;
overflow: hidden;
}
/*figure:hover figcaption*/
figure figcaption {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
top: 0;
}
figcaption {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
/*height: 530px;
width: 790px;*/
top: -100%;
background: rgba(3,3,3,.3);
color: #fff;
border-radius: 18px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
-webkit-transition-delay: .5s;
-moz-transition-delay: .5s;
-o-transition-delay: .5s;
-ms-transition-delay: .5s;
transition-delay: .5s;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
figcaption h3 {
font-family: 'Open Sans Condensed',sans-serif;
font-weight: 700;
color: #0088cc;
padding: 10px 20px;
margin-bottom: 0;
position: relative;
left: 100%;
margin-top: 37px;
font-size: 30px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
transition: all .5s;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1s;
}
figcaption p {
font-family: Verdana, Arial, sans-serif;
padding: 10px 20px;
margin-bottom: 0;
margin-top: 20px;
position: relative;
left: 100%;
font-size: 14px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
transition: all .5s;
-webkit-transition-delay: 1.3s;
-moz-transition-delay: 1.3s;
-o-transition-delay: 1.3s;
-ms-transition-delay: 1.3s;
transition-delay: 1.3s;
}
/*figure:hover h3,figure:hover p*/
figure h3,figure p {
left: 0;
}
figcaption a {
color: #fff;
border: 2px solid #fff;
padding: 4px 10px;
text-decoration: none;
-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
box-shadow:inset 0px -3px 7px 0px #29bbff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0088cc), color-stop(1, #2dabf9));
background:-moz-linear-gradient(top, #0088cc 5%, #2dabf9 100%);
background:-webkit-linear-gradient(top, #0088cc 5%, #2dabf9 100%);
background:-o-linear-gradient(top, #0088cc 5%, #2dabf9 100%);
background:-ms-linear-gradient(top, #0088cc 5%, #2dabf9 100%);
background:linear-gradient(to bottom, #0088cc 5%, #2dabf9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#2dabf9',GradientType=0);
background-color:#0088cc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #0b0e07;
display:inline-block;
cursor:pointer;
font-family:Arial;
font-size:14px;
text-decoration:none;
text-shadow:0px 1px 0px #263666;
}
/*figcaption a:hover*/
figcaption a {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0088cc));
background:-moz-linear-gradient(top, #2dabf9 5%, #0088cc 100%);
background:-webkit-linear-gradient(top, #2dabf9 5%, #0088cc 100%);
background:-o-linear-gradient(top, #2dabf9 5%, #0088cc 100%);
background:-ms-linear-gradient(top, #2dabf9 5%, #0088cc 100%);
background:linear-gradient(to bottom, #2dabf9 5%, #0088cc 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0088cc',GradientType=0);
background-color:#0088cc;
color:#666;
}
Das heißt immer noch funktioniert.