MODEHAUS SCHLATTE 1190 Wien, Obkirchergasse 23 Mo.-Fr. 8.20-12.30 und 14.30-18.00 Uhr Tel. 01/ 320 33 03
Unsere Marken
stapelbare animation mit pause on hover plus link bspl. 4 logos
<<<<code module>>>>
<html>
<div class=”logo_reference_wrapper”>
<div class=”logo_reference_grid”>
<img src=”logo1.svg” class=”sub01″ />
<img src=”logo2.svg” class=”sub02″ />
<img src=”logo3.svg” class=”sub03″ />
<img src=”logo4.svg” class=”sub04″ />
<!– Wiederholung für Endlosschleife –>
<img src=”logo1.svg” class=”sub01″ />
<img src=”logo2.svg” class=”sub02″ />
<img src=”logo3.svg” class=”sub03″ />
<img src=”logo4.svg” class=”sub04″ />
</div>
</div>
</html>
<style>
.logo_reference_wrapper {
overflow: hidden;
width: 100%;
height: 10em;
position: relative;
}
.logo_reference_grid {
display: grid;
grid-template-columns: repeat(8, 1fr); /* doppelte Anzahl für Endlosschleife */
grid-template-rows: 1fr;
gap: 0;
width: 200%;
animation: scrollLogos 20s linear infinite;
z-index: 1;
}
.logo_reference_wrapper:hover .logo_reference_grid {
animation-play-state: paused;
}
.logo_reference_grid img {
width: 100%;
height: auto;
object-fit: contain;
z-index: 2;
}
/* Grid-Area-Zuweisungen */
.sub01 { grid-area: 1 / 1 / 2 / 2; }
.sub02 { grid-area: 1 / 2 / 2 / 3; }
.sub03 { grid-area: 1 / 3 / 2 / 4; }
.sub04 { grid-area: 1 / 4 / 2 / 5; }
/* Wiederholte Grid-Areas für Endlosschleife */
.sub01:nth-of-type(5) { grid-area: 1 / 5 / 2 / 6; }
.sub02:nth-of-type(6) { grid-area: 1 / 6 / 2 / 7; }
.sub03:nth-of-type(7) { grid-area: 1 / 7 / 2 / 8; }
.sub04:nth-of-type(8) { grid-area: 1 / 8 / 2 / 9; }
@keyframes scrollLogos {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
</style>
end codemodule
start overlay-links und rechts; grid im freeform CSS
.gradient_logo_reference{ display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
width: 100%;
height: 10em;
}
.gradient_overlay{
justify-self: stretch;
align-self: stretch;
grid-area: 1 / 1 / 2 / 2;
background: #EFEEBF;
background: linear-gradient(90deg, rgba(239, 238, 191, 1) 0%, rgba(239, 238, 191, 0) 3%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 58%, rgba(239, 238, 191, 0) 97%, rgba(239, 238, 191, 1) 100%);
}
.logo_animation_grid{
grid-area: 1 / 1 / 2 / 2;z-index:1; }
end freeform CSS