Vinyl Showcase Library - Shows the album and info above hover

Tags: hover, html, album, code, animation, layout, vinyl, decoration, band, music, hover, album, animation, layout

Description:

Common Questions

Change the covers and everything you'd want!

Any image hosting site works

The image hosting site i used in my own layout is Rate Your Music, search your desired album, click in the image and the site will give you a html code.

To change the title color (if), change the #000000 to any other color code.

♪ Exemple In My Profile ♪

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Jack ☂ (https://layouts.spacehey.com/layout?id=106135) -->

<!----- VINYL VINYL VINYL VINYL ---->

<style>
#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;
  }

</style>
<div id="vinyl-gallery">
  <div class="vinyl">
    <img src="ALBUMCOVERSOURCE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>

  <div class="vinyl">
    <img src="ALBUMCOVERSOURCECODE"/>
  </div>
  <div class="title">Artist - Album</div>
</div>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 4313 comments ( View all | Add Comment )

hope	1750803489 using thiss ദ്ദി (≧ᗜ≦ ) thank you so much !!! Report Comment
crusty.cripple	1750799138 When I use this the pictures get so separated that they leave the screen. Is there a way to fix this?? Report Comment
jack !!	1750794001 using :3 Report Comment
K4NADE	1750786137 Using! Report Comment
Editas	1750766376 Using finally everything worked thankuu Report Comment
swaggy.skazzy☣︎	1750757807 using Report Comment
⁺‧₊˚ ཐི⋆Mimi🦑🐇	1750741091 does anyone know how to get the codes :( Report Comment u have a tutorial on tiktok! their username is @e868480 ♡ by jayer:p; 1750761558; Report
f4irydimples	1750739704 using!! Report Comment
vampy_rhy	1750730217 using! Report Comment
Robyn [VIP💎]	1750728685 usinggg Report Comment
Reiven Sorayah	1750722739 using! Report Comment
Reiven Sorayah	1750722737 using! Report Comment
shina	1750715069 using it thnx Report Comment
Antibass	1750714238 gonna use, thanks! Report Comment
Maria!	1750702725 Usingg!! Report Comment
Ad4m!!	1750699072 can someone help, it worked for the first 4 but all the others after that don't get saved Report Comment
gigi	1750693226 can someone help me the text color wont change even though i changed the hex code T-T Report Comment
Micheal Myers	1750689102 Using ‼️ Report Comment
xX_w3lcome2h3ll_Xx	1750685289 How to work the images cos it won't show up for me no matter what i do Report Comment
Ad4m!!	1750685061 Usingg!!!! Report Comment Bro me ayudas hacer uno :( que tipo de enlace debo copiar de las imágenes? by 𓊈𒆜𝘽𝙐𝘽𝘼𒆜𓊉; 1750720714; Report Bro me ayudas hacer uno :( que tipo de enlace debo copiar de las imágenes? by 𓊈𒆜𝘽𝙐𝘽𝘼𒆜𓊉; 1750720714; Report Simplemente ve a Google, haz clic izquierdo, guarda el enlace de la imagen, cópialo y pégalo en el código. Copié las imágenes de Wikipedia (usé el Traductor de Google, no hablo español). by Ad4m!!; 1750770049; Report