Widget:Twentytwenty: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(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, 16:21 Uhr
TwentyTwenty-Image Widget