Widget:SlidingGallerySewing: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 78: | Line 78: | ||
<div class="gallery-item"> | <div class="gallery-item"> | ||
<a href="/wiki/Janome_HD-3000BE"> | <a href="/wiki/Janome_HD-3000BE"> | ||
<img src="wiki/images/thumb/0/01/Janome_HD-3000BE.jpeg/400px-Janome_HD-3000BE.jpeg" alt="Janome HD-3000BE"> | <img src="/wiki/images/thumb/0/01/Janome_HD-3000BE.jpeg/400px-Janome_HD-3000BE.jpeg" alt="Janome HD-3000BE"> | ||
</a> | </a> | ||
<div class="gallery-caption">Janome HD-3000BE<br><b>Intermediate Home Sewing Machine</b></div> | <div class="gallery-caption">Janome HD-3000BE<br><b>Intermediate Home Sewing Machine</b></div> | ||
| Line 86: | Line 86: | ||
<div class="gallery-item"> | <div class="gallery-item"> | ||
<a href="/wiki/Bernina_model_1000"> | <a href="/wiki/Bernina_model_1000"> | ||
<img src="/wiki/ | <img src="/wiki/images/thumb/f/f9/Bernina1008.png/400px-Bernina1008.png" alt="Bernina model 1008"> | ||
</a> | </a> | ||
<div class="gallery-caption">Bernina model 1008<br><b>Intermediate Home Sewing Machine</b></div> | <div class="gallery-caption">Bernina model 1008<br><b>Intermediate Home Sewing Machine</b></div> | ||
Revision as of 22:35, 15 October 2026
<style> /* Layout containers matching your original specifications */ .gallery-outer { position: relative; height: 100%; margin: 20px 0; } .gallery-bg { position: relative; margin: 0 -1em; padding: 0; background-color: transparent; border: 1px none #ddd; height: 100%; } .gallery-viewport { position: relative; margin: 0 auto; width: 742px; height: 300px; overflow: hidden; }
/* Sliding engine (Pure CSS - Starts automatically) */ .wrapper {
position: absolute; top: 0; left: 0; display: flex; gap: 20px; width: 3000px; /* Generous width for the moving track */ animation: 45s credits linear infinite;
}
/* ⏸️ PAUSE ANIMATION ON HOVER */ .wrapper:hover {
animation-play-state: paused;
}
.gallery-item {
display: inline-block; text-align: center; width: 160px; flex-shrink: 0;
}
.gallery-item img {
width: 120px; height: 180px; object-fit: contain; transition: transform 0.3s ease;
}
/* 🔍 ENLARGE IMAGE ON HOVER */ .gallery-item img:hover {
transform: scale(1.15); cursor: pointer;
}
.gallery-caption {
font-size: 0.85em; color: #333; margin-top: 8px; line-height: 1.3;
}
@keyframes credits {
0% { transform: translateX(0); }
100% { transform: translateX(-1620px); } /* Perfect loop reset point based on total item widths */
} </style>