<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>
<a href="/wiki/Singer_HD_4432">
<img src="/wiki/images/thumb/e/e1/Singer_HD-1_4452.jpg/600px-Singer_HD-1_4452.jpg?20250616215327" alt="Singer HD 4432">
</a>
Singer HD 4432
Basic sewing machine
<a href="/wiki/Singer_Simple_3232">
<img src="/wiki/images/thumb/0/08/Singer_Simple.jpg/800px-Singer_Simple.jpg?20191223184102" alt="Singer Simple 3232">
</a>
Singer Simple 3232
Starter sewing machine
<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">
</a>
Janome HD-3000BE
Intermediate Home Sewing Machine
<a href="/wiki/Bernina_model_1000">
<img src="/wiki/index.php/File:Bernina1008.png" alt="Bernina model 1008">
</a>
Bernina model 1008
Intermediate Home Sewing Machine
<a href="/wiki/Brother_1034DX">
<img src="/wiki/images/3/3e/Brother-1034DX-Serger.jpeg?20261015223103" alt="Brother 1034DX">
</a>
Brother 1034DX
Serger
<a href="/wiki/Brother_PE770">
<img src="/wiki/images/8/8d/BrotherPE770.jpg" alt="Brother PE770">
</a>
Brother PE770
Embroidery machine
<a href="/wiki/PGM_dress_forms">
<img src="/wiki/Special:FilePath/PGM_dress_forms.jpg" alt="PGM dress forms">
</a>
PGM dress forms
Collapsible form
<a href="/wiki/Wacom_Cintiq_Tablet">
<img src="/wiki/Special:FilePath/Wacom_Cintiq_Tablet.jpg" alt="Wacom Cintiq Tablet">
</a>
Wacom Cintiq Tablet
Digital drawing
<a href="/wiki/Cutting_Table">
<img src="/wiki/Special:FilePath/Cutting_Table.jpg" alt="Cutting Table">
</a>
Cutting Table
Fabric covered