When I hover over these, they move to the right however, this causes the box to resize down, which often ends up resetting the covers. Is there a way to stop the box from resizing ? 
Could you share your code? (There is a new option to share code in the forums, it's two buttons to the right of the GIF button)
<div class="vinyl">
<img src="https://i.ibb.co/zVn3jF7B/Screenshot-2026-08-09-at-03-26-23.png" loading="lazy" decoding="async">
</div>
<div class="title">N.E.R.D - NO_ONE EVER REALLY DIES</div>
<div class="vinyl">
<img src="https://i.ibb.co/nMg0Mky0/Screenshot-2026-08-09-at-03-22-51.png" loading="lazy" decoding="async">
</div>
<div class="title">Panic! at the Disco - A Fever You Cant Sweat Out</div>
<div class="vinyl">
<img src="https://i.ibb.co/PspHLJYJ/Screenshot-2026-08-09-at-03-23-33.png" loading="lazy" decoding="async">
</div>
<div class="title">Panic! at the Disco - Pretty. Odd.</div>
<div class="vinyl">
<img src="https://i.ibb.co/kVqBdrsK/Screenshot-2026-08-09-at-03-23-17.png" loading="lazy" decoding="async">
</div>
<div class="title">Fall Out Boy - Take This To Your Grave</div>
<div class="vinyl">
<img src="https://i.ibb.co/d4bXvysN/Screenshot-2026-08-09-at-03-24-01.png" loading="lazy" decoding="async">
</div>
<div class="title">Fall Out Boy - From Under The Cork Tree</div>
<div class="vinyl">
<img src="https://i.ibb.co/XxQ8Ntwt/Screenshot-2026-08-09-at-03-25-34.png" loading="lazy" decoding="async">
</div>
<div class="title">LMFAO - Sorry For Party Rocking</div>
<div class="vinyl">
<img src="https://i.ibb.co/dswvnCL1/Screenshot-2026-08-09-at-03-29-18.png" loading="lazy" decoding="async">
</div>
<div class="title">Deftones - Adrenaline</div>
<div class="vinyl">
<img src="https://i.ibb.co/zhH9bqR3/Screenshot-2026-08-09-at-03-23-42.png" loading="lazy" decoding="async">
</div>
<div class="title">New Found Glory - Catalyst</div>
<div class="vinyl">
<img src="https://i.ibb.co/rGF6zMBp/Screenshot-2026-08-09-at-03-25-56.png" loading="lazy" decoding="async">
</div>
<div class="title">Good Kid M.A.A.D City</div>
</div>
</code>#vinyl-gallery * {
all: unset;
}
#vinyl-gallery {
all: initial!important;
width: 100%!important;
height: 230px!important;
margin: 30px 0!important;
display: flex!important;
flex-direction: row!important;
position: relative!important;
margin-left: -6px!important;
}
#vinyl-gallery .vinyl {
all:unset!important;
perspective: 500px !important;
width: 18px!important;
transition: width 0.5s!important;
}
#vinyl-gallery .vinyl:hover {
width: 148px!important;
}
#vinyl-gallery img {
all:unset!important;
transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;
width: 180px!important;
height: 180px!important;
transform: rotateX(0deg) rotateY(25deg)!important;
transform-style: preserve-3d!important;
border-radius: 4px!important;
border: 2px solid rgba(0, 0, 0, 0.1)!important;
object-fit: cover!important;
}
#vinyl-gallery .vinyl:hover img {
transform: rotateX(0deg) rotateY(10deg)!important;
width: 188px!important;
height: 188px!important;
margin-top: -2px!important;
}
#vinyl-gallery .title {
color: #000000;
display: block;
visibility: hidden;
position: absolute;
bottom: 0px;
text-align: center;
width: 100%;
padding-left: 6px;
}
#vinyl-gallery .vinyl:nth-child(n):hover + .title {
visibility: visible;
}
Yeah np, (code came from this profile element post-Vinyl Gallery
You must be logged in to reply.