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

connor!	1752361579 using! also works with animated album covers! Report Comment
aubs	1752357442 using Report Comment
jorga	1752352836 using ;p Report Comment
MarKaroski	1752349401 using :3 Report Comment
Katie	1752349289 using?? :p Report Comment
mio	1752347141 using :D Report Comment
ᯓ★willowwˎˊ˗	1752345533 using Report Comment
‧͙⁺˚･༓☾ swaglison ☽༓･˚⁺‧͙	1752344440 using :) Report Comment
CHESHIRE	1752342734 using Report Comment
wondailas	1752330960 using Report Comment
♔ 𝕰𝖗𝖊 (account still under construction><)	1752329255 using>< Report Comment
𐔌 . ⋮ inner_cornea .ᐟ ֹ ₊ ꒱	1752325893 using!! thank you<3 Report Comment
marmagka_	1752322261 Hi! So i'm a new user of spacehey and idk how to add the images for the album covers. Every time i try to do so, the page shows a 502 error code when i'm try to save it. Could anyone help me do it pleae?! :p Report Comment if ur getting a 505 screen try logging off and logging back in and you have to copy the url link from the album cover u desire and put it into the code that says "ALBUMSOURCE" or smth like that I forgot what it said exactly..but it will have image src in the code so u can spot it!! I recommend getting ur image urls off of amazon bc its js easier to find the album images on there by agvonzyxx; 1752331615; Report
iwigis2vee	1752319600 usingg! Report Comment
rawrlev	1752315465 using<3 Report Comment
supersonic☆lobotomy	1752310076 usinggg:3 Report Comment
Gogopokowie	1752306305 Using!! Report Comment
finn	1752305988 i am DEEPLY infatuated with you Report Comment
Chicken (˶˃ ᵕ ˂˶)	1752302545 using!! Report Comment
agvonzyxx	1752298013 Using!! Report Comment