vinyl gallery for profile!

1 month ago - by nat - Misc - used 284 times

a cute little vinyl gallery to show off the covers and titles of your fave music

i recommend using rateyourmusic.com to find album covers

fill in IMAGE ADRESS with the image address of your album cover and BAND NAME - ALBUM NAME with the band name and song name (shocking i know lolz)

paste the css code into the layout code section + paste the html code with the image links and whatnot into your bio (or wherever you want the gallery to show up)

lmk if you have any questions, im happy to help :D
(DISCLAIMER: REPOSTED TO FIX TYPOS)

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save. Leave the Visual Builder's existing CSS in place - add this under it, don't replace it.

<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: #FFFFFF;

    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>

HTML Code

This element also has an HTML part - paste it into your About Me (or wherever the description says).

<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: #FFFFFF;

    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="IMAGE ADDRESS" loading="lazy" decoding="async">

  </div>

  <div class="title">BAND NAME - ALBUM NAME</div>



  <div class="vinyl">

    <img src="IMAGE ADDRESS" loading="lazy" decoding="async">

  </div>

  <div class="title">BAND NAME - ALBUM NAME</div>



  <div class="vinyl">

    <img src="IMAGE ADDRESS" loading="lazy" decoding="async">

  </div>

  <div class="title">BAND NAME - ALBUM NAME</div>



  <div class="vinyl">

    <img src="IMAGE ADDRESS" loading="lazy" decoding="async">

  </div>

  <div class="title">BAND NAME - ALBUM NAME</div>



  <div class="vinyl">

    <img src="IMAGE ADDRESS" loading="lazy" decoding="async">

  </div>

  <div class="title">BAND NAME - ALBUM NAME</div>



 <div class="vinyl">

    <img src="IMAGE ADDRESS" loading="lazy" decoding="async">

  </div>

  <div class="title">BAND NAME - ALBUM NAME</div>



  <div class="vinyl">

    <img src="IMAGE ADDRESS" loading="lazy" decoding="async">

  </div>

  <div class="title">BAND NAME - ALBUM NAME</div>



  <div class="vinyl">

    <img src="IMAGE ADDRESS" loading="lazy" decoding="async">

  </div>

  <div class="title">BAND NAME - ALBUM NAME</div>



<div class="vinyl">

    <img src="IMAGE ADDRESS" loading="lazy" decoding="async">

  </div>

  <div class="title">BAND NAME - ALBUM NAME</div>

How to use: copy the CSS above → open your layout editor → switch to the Advanced CSS tab → paste at the bottom (keep the Visual Builder CSS above it) → save → refresh your profile. If the element also has HTML, paste that into About Me or at the bottom of Advanced CSS after the CSS. Elements stack - you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Misc

« Back to Misc | « All Profile Elements