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>
/* 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; }