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!

I reccomend the site RATE YOUR MUSIC, to copy the images Adress and paste!!

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

Example of the code 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 157 comments ( View all | Add Comment )

Mikey ☆	1720064757 using ^_^ Report Comment
BlytheDoll	1720051560 USING!!! Report Comment
stinker	1720038401 using :D Report Comment
Thing	1720037023 Im gonna use :P Report Comment
ko	1720019833 using : ) Report Comment
💣VAL⛓️‍💥	1720008670 usingg!! Report Comment
Asher13th!	1719921636 using! c: Report Comment
MARZANA	1719920522 I use it, or at least try to. Explain to me where to insert the album photo code so that it is displayed. I've been sitting for an hour now, masturbating these codes, trying to figure it out. Report Comment I know I'm an idiot by MARZANA; 1719920566; Report after the image src there's "ALBUMCOVERSOURCECODE". Replace the ALBUMCOVERSOURCECODE in between the quotation marks with the link to the album cover ! by drowzyz; 1719973402; Report
︻デ═一 ▸⭐ TOM ⭐	1719916702 using holy shit this is so cool Report Comment
screamo crip	1719895575 using Report Comment
0rrin✩	1719884863 using Report Comment
Kral!!	1719866925 Uzingg Report Comment
₊　⠀⠀vᥱᥱ　ㅤ꒷⠀　 ׅ⠀ㅤ ୨ৎ	1719857028 using Report Comment
marg0_was_h3r3	1719841762 using!! thx!! Report Comment
cunty	1719753918 using thx!! Report Comment
trashyashley	1719700823 using!! Report Comment
𝔢𝔯𝔬𝔰ೃ⁀➷	1719663509 using!! Report Comment
>< Sovi ><	1719648719 using! Report Comment
blockytheblock1	1719640087 using!! Report Comment
Queef legend	1719619288 using!!! Report Comment