Widget:SlidingGallerySewing: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 107: | Line 107: | ||
</div> | </div> | ||
<!-- ITEM 8: Wacom Tablet --> | <!-- ITEM 8: Wacom Tablet --> | ||
<div class="gallery-item"> | <div class="gallery-item"> | ||
<a href="/wiki/Wacom_Cintiq_Tablet"> | <a href="/wiki/Wacom_Cintiq_Tablet"> | ||
<img src=" | <img src="#" alt="Wacom Cintiq Tablet"> | ||
</a> | </a> | ||
<div class="gallery-caption">Wacom Cintiq Tablet<br><b>Digital drawing</b></div> | <div class="gallery-caption">Wacom Cintiq Tablet<br><b>Digital drawing</b></div> | ||
| Line 126: | Line 119: | ||
<div class="gallery-item"> | <div class="gallery-item"> | ||
<a href="/wiki/Cutting_Table"> | <a href="/wiki/Cutting_Table"> | ||
<img src=" | <img src="#" alt="Cutting Table"> | ||
</a> | </a> | ||
<div class="gallery-caption">Cutting Table<br><b>Fabric covered</b></div> | <div class="gallery-caption">Cutting Table<br><b>Fabric covered</b></div> | ||
Revision as of 22:37, 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>