Widget:SlidingGallerySewing: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 80: | Line 80: | ||
<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> | <div class="gallery-caption">Janome HD-3000BE<br><b>Intermediate Home Sewing Machine</b></div> | ||
</div> | </div> | ||
| Line 88: | Line 88: | ||
<img src="/wiki/index.php/File:Bernina1008.png" alt="Bernina model 1008"> | <img src="/wiki/index.php/File:Bernina1008.png" alt="Bernina model 1008"> | ||
</a> | </a> | ||
<div class="gallery-caption">Bernina model 1008<br><b> | <div class="gallery-caption">Bernina model 1008<br><b>Intermediate Home Sewing Machine</b></div> | ||
</div> | </div> | ||
| Line 96: | Line 96: | ||
<img src="/wiki/Special:FilePath/Brother_1034DX.jpg" alt="Brother 1034DX"> | <img src="/wiki/Special:FilePath/Brother_1034DX.jpg" alt="Brother 1034DX"> | ||
</a> | </a> | ||
<div class="gallery-caption">Brother 1034DX<br><b>Serger | <div class="gallery-caption">Brother 1034DX<br><b>Serger</b></div> | ||
</div> | </div> | ||
Revision as of 22:22, 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>