Widget:Twentytwenty: Unterschied zwischen den Versionen
Aus FürthWiki
Keine Bearbeitungszusammenfassung |
(added fallback-animation if no javascript) |
||
| Zeile 15: | Zeile 15: | ||
.twentytwenty-overlay { | .twentytwenty-overlay { | ||
display: none; | display: none; | ||
} | |||
.twentytwenty-container:not(.active) { | |||
position: relative; | |||
} | |||
.twentytwenty-container:not(.active) img.Bild2 { | |||
position: absolute; | |||
left: 0; | |||
} | |||
@keyframes fade { | |||
0% { opacity:0; } | |||
100% { opacity:1; } | |||
} | |||
.twentytwenty-container:not(.active) img.Bild2 { | |||
animation-name: fade; | |||
animation-timing-function: ease-in-out; | |||
animation-iteration-count: infinite; | |||
animation-duration: 5s; | |||
animation-direction: alternate; | |||
} | } | ||
</style> | </style> | ||
<div class="twentytwenty-container"> | <div class="twentytwenty-container"> | ||
<img src="<!--{$Bild1|escape:'html'}-->" /> | <img class="Bild1" src="<!--{$Bild1|escape:'html'}-->" /> | ||
<img src="<!--{$Bild2|escape:'html'}-->" /> | <img class="Bild2" src="<!--{$Bild2|escape:'html'}-->" /> | ||
</div> | </div> | ||
Version vom 22. August 2017, 15:21 Uhr
TwentyTwenty-Image Widget
