Vinyl Showcase Library - Shows the album and info above hover

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

Description:

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 678 comments ( View all | Add Comment )

˖ ࣪⊹𐙚 Lottie ‧₊˚ ⋅	1732176402 usingg Report Comment
12ukicyy1!	1732165051 uisng Report Comment
keennquake !!	1732157261 usingg!!1 Report Comment
keennquake !!	1732157163 usingg!!1 Report Comment
T	1732134988 Using Report Comment
Theo	1732075350 using Report Comment
Ripperdoc	1732060485 Using:) Report Comment
𝙙𝙚𝙫𝙤𝙣 𝙩𝙝𝙚𝙚 𝙜𝙪𝙣 𝙚𝙡𝙚𝙥𝙝𝙖𝙣𝙩	1732030661 using Report Comment
rerudi	1732016649 using Report Comment
N4TH4N43L XP	1732005458 Usando!!! Report Comment
Sp1der.Whor3	1731977664 I was going to use this but I don't know how to work it am I meant to replace "ALBUMCOVERSOURCE" with the html code? Report Comment did you ever figure out how? by Isa <3; 1731987749; Report
Mattie!	1731977046 hi!! im so using! Report Comment
Emilyrrr	1731965907 Using! Report Comment
mila	1731923336 Hiiii can someone please help me out i did everything i had to but the album cover stays on the bottom and there’s a clear space on the top of it where it should’ve went i srsly need help or smthng. <3 Report Comment working on a fix, had the same issue, the second place holder image stacked on top is coming from the code copied at the rate my music link; if I take it out I'm losing the album titles as soon as I figure out a fix that works will comment again by ...; 1731941362; Report oki, just make sure you only copy the text off of the website you use for the image that's in between the quotations after img src= and replace it only inside the quotations where the layout code you copied to "ALBUMCOVERSOURCE" example I was copying the entire html string and getting the weird stacking like this... so I just took only the link in the img src= quotations and that worked like so.... //e.snmc.io/i/300/w/b4fd3c047059351fa89640be6a86a367/2960808" alt="My Dying Bride - A Line of Deathless Kings hopefully this helps I'm not a coder by ...; 1731941820; Report Hiii i tried it and i still can’t seem to get it to work so i just gave up lol but thanks for the help by mila; 1731988959; Report
Stelbel	1731918293 usinngg Report Comment
>>truculentAnomaly	1731888101 using!!!!! (once i figure out how) Report Comment
noah!! {profile under construction}	1731884288 using tysm :p Report Comment
XxXCannibalistic_CadaverXxX	1731858189 using :DD Report Comment
(っ◔◡◔)っ ♥ Leyland ♥	1731853527 use Report Comment