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

ARThur_	1751379686 using!! Report Comment
Taraneh	1751375670 using :3 Report Comment
𓏵 ⋮ hallie / marie ₊ ⊹	1751371407 Using! Report Comment
Connor	1751347135 Using!! Thank you so much! Report Comment
mia :/	1751343566 when I use this layout everything else codes correctly, but The pictures/ album covers don't show :( plz help Report Comment
a	1751334612 using Report Comment
Chris	1751334466 using Report Comment
Shr00mG00ber01	1751324047 usingg Report Comment
cass	1751316478 usinggg Report Comment
M3TAL_LXVER🖤	1751303132 UGHH this is sooo hard to do Report Comment
ジュイ 🫧	1751300423 using :3 Report Comment
Bea	1751292420 I can't get the photos to load or smth like am I using a bad link of what?? Report Comment
Aren	1751280629 I tried this but all my pictures are under the place they are meant to be in and they are really wide and don't fit the page. Can anyone help me? Report Comment try following @lupitaa333's tutorial on yt , they show how to do do it pretty easily :3 by pxeater; 1751289419; Report dont forget "< / div>" command after the last vinyl :] (no spaces) by Rai; 1751289449; Report
Byronic Angel	1751263971 using! thank you, i think i did something wrong lol they're all spaced out by a lot. Report Comment
SH_4RK ✞	1751259446 using Report Comment
𝙺𝚒𝚔𝚒𝙲𝚘𝚏𝚏𝚎𝚎 ₍ᐢ..ᐢ₎	1751247164 I wanna use it but i got confused on how to place it n make the songs appear, im dumb pls help Report Comment hello, do you still need help? i can help with that by Gr◌◌s; 1751248121; Report yes plssss, i rlly wanna add it to my layout n im desperate!!! by 𝙺𝚒𝚔𝚒𝙲𝚘𝚏𝚏𝚎𝚎 ₍ᐢ..ᐢ₎; 1751248438; Report Well, in each part where it says " < img src = "ALBUMCOVERSOURCE" / > " is where you are going to put the image of the cover of the song that you want to put, replace the "ALBUMCOVERSOURCE" with the link of the link address of the photo (for example, search on Google for your favorite song and on the first photo that appears from the album, you right click on it and click on "copy link address") Now, just below that will appear " < divclass = "title " >Artist - Album < / div > " there you are going to replace it and put the name of the artist and the name of the album (or the song) for example: < div class = " title "> Melanie Martinez (Artist) - Cry Baby (Album) < / div > obviously without the parentheses If you have any questions or got lost somewhere, you can tell me! by Gr◌◌s; 1751249472; Report omgg thank u sm, now i understand a bit morew!!!!<3 by 𝙺𝚒𝚔𝚒𝙲𝚘𝚏𝚏𝚎𝚎 ₍ᐢ..ᐢ₎; 1751251562; Report I understand you because I was also confused at first, anyway, yw! by Gr◌◌s; 1751252089; Report
Lerdentim	1751245782 usiiingggg XPPP Report Comment
d3rp7_h00v3s	1751242880 Using!!q(≧▽≦q) Report Comment
✿༺ 𝒟𝑜𝓁𝓁𝑒𝒹𝐿𝒶𝓂𝒷 ༻✿	1751242837 Im using (˶˃ ᵕ ˂˶) Report Comment
henhenn!!	1751232018 usingg!! Report Comment