Vinyl Showcase
This widget is not yet mobile friendly! This widget was made out of a desire to have a nice album showcase on websites that don't allow JavaScript, and uses (relatively new) CSS 3D functions.
- Images were pulled from RateYourMusic.
<div id="vinyl-gallery">
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/systemofadown_systemofadown.jpg"
/>
</div>
<div class="title">System of a Down - System of a Down</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/soundgarden_louderthanlove.jpg"
/>
</div>
<div class="title">Soundgarden - Louder Than Love</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/soundgarden_badmotorfinger.jpg"
/>
</div>
<div class="title">Soundgarden - Badmotorfinger</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/sepultura_roots.jpg"
/>
</div>
<div class="title">Sepultura - Roots</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/scorpions_tokyotapes.jpg"
/>
</div>
<div class="title">Scorpions - Tokyo Tapes</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/scorpions_animalmagnetism.jpg"
/>
</div>
<div class="title">Scorpions - Animal Magnetism</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/redsnapper_princeblimey.jpg"
/>
</div>
<div class="title">Red Snapper - Prince Blimey</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/pearljam_ten.jpg"
/>
</div>
<div class="title">Pearl Jam - Ten</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/obliteration_nekropsalms.jpg"
/>
</div>
<div class="title">Obliteration - Nekropsalms</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/nirvana_nevermind.jpg"
/>
</div>
<div class="title">Nirvana - Nevermind</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/judaspriest_painkiller.jpg"
/>
</div>
<div class="title">Judas Priest - Painkiller</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/deftones_whitepony.jpg"
/>
</div>
<div class="title">Deftones - White Pony</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/deftones_gore.jpg"
/>
</div>
<div class="title">Deftones - Gore</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/deftones_aroundthefur.jpg"
/>
</div>
<div class="title">Deftones - Around the Fur</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/deftones_adrenaline.jpg"
/>
</div>
<div class="title">Deftones - Adrenaline</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/death_human.jpg"
/>
</div>
<div class="title">Death - Human</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/blacksabbath_paranoid.jpg"
/>
</div>
<div class="title">Black Sabbath - Paranoid</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/aliceinchains_mtvunplugged.jpg"
/>
</div>
<div class="title">Alice in Chains - MTV Unplugged</div>
<div class="vinyl">
<img
src="https://static.kazimariusz.com/asset/albumcover/aliceinchains_dirt.jpg"
/>
</div>
<div class="title">Alice in Chains - Dirt</div>
</div>
</div>
/* Vinyl Showcase - www.kazimariusz.com */
#vinyl-gallery * {
all: unset;
}
#vinyl-gallery {
all: initial;
width: 100%;
height: 230px;
margin: 30px 0;
display: flex;
flex-direction: row;
position: relative;
margin-left: -6px;
}
#vinyl-gallery .vinyl {
perspective: 500px !important;
width: 18px;
transition: width 0.5s;
}
#vinyl-gallery .vinyl:hover {
width: 148px;
}
#vinyl-gallery img {
transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s;
width: 180px;
height: 180px;
transform: rotateX(0deg) rotateY(25deg);
transform-style: preserve-3d;
border-radius: 4px;
border: 2px solid rgba(0, 0, 0, 0.1);
}
#vinyl-gallery .vinyl:hover img {
transform: rotateX(0deg) rotateY(10deg);
width: 188px;
height: 188px;
margin-top: -2px;
}
#vinyl-gallery .title {
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;
}