← Back to Layouts
cd staxk

Name: FriendRewind
Author: FriendRewind
Author: aheartwellmaddie
Category: ?
Created: June 29, 2026
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<style>
body{
    background:#0b0712;
    font-family:Arial, sans-serif;
}


/* whole object */

.cd-tower{

    width:260px;
    margin:50px auto;
    text-align:center;

    perspective:800px;

}


/* title */

.tower-title{

    color:#d7b7ff;
    letter-spacing:3px;
    font-size:14px;
    margin-bottom:15px;

    text-shadow:
    0 0 15px #a855ff;

}



/* chrome tower */

.tower{

    padding:25px 15px;

    background:
    linear-gradient(
    90deg,
    #555,
    #ddd,
    #999,
    #eee,
    #555
    );

    border-radius:20px;


    box-shadow:

    inset 0 0 20px white,
    0 20px 40px black;


    transition:.5s;

}


.tower:hover{

    transform:
    rotateY(-8deg);

}




/* slots */

.slot{

    height:85px;

    margin-bottom:10px;

    position:relative;

    display:flex;
    align-items:center;

    overflow:visible;

}



/* dark slot */

.slot:before{

    content:"";

    position:absolute;

    left:0;
    right:0;

    height:70px;

    background:#222;

    border-radius:10px;

}



/* CD */

.cd{

    width:70px;
    height:70px;

    border-radius:50%;

    position:relative;

    z-index:2;

    transition:
    .45s cubic-bezier(.2,.8,.2,1);


    overflow:hidden;


    box-shadow:

    0 0 10px black;


}



/* album */

.cd img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

}



/* shine */

.cd:before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.7),
    transparent
    );


    transform:
    translateX(-100%);

    transition:.4s;

}



/* center hole */

.cd:after{

    content:"";

    position:absolute;

    width:12px;
    height:12px;

    background:#111;

    border-radius:50%;


    top:50%;
    left:50%;

    transform:
    translate(-50%,-50%);

}



/* hover pull out */


.slot:hover .cd{


    transform:

    translateX(65px)
    rotate(360deg)
    scale(1.15);


    z-index:10;


    box-shadow:

    0 0 25px #b46cff,
    0 20px 30px black;


}



/* shine animation */

.slot:hover .cd:before{

    animation:
    shine .7s;

}


@keyframes shine{


    to{

    transform:
    translateX(100%);

    }

}



/* text */

.slot span{

    position:absolute;

    left:150px;

    opacity:0;

    width:100px;

    color:white;

    font-size:12px;

    transition:.3s;


}


.slot:hover span{

    opacity:1;

}



/* bottom lights */


.lights{

    margin-top:15px;

    color:#c084fc;

    letter-spacing:8px;

    text-shadow:
    0 0 15px #b46cff;


}
</style>

<div class="cd-tower">

  <div class="tower-title">
    MY CD COLLECTION
  </div>


  <div class="tower">

    <div class="slot">
      <div class="cd">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7mS8XixfjEuF-vuhO6lAm-JRq9NiioXvdydYAB8r6Fg&s=10">
      </div>
      <span>Trust us we Lie</span>
    </div>


    <div class="slot">
      <div class="cd">
        <img src="https://m.media-amazon.com/images/I/618TwN1CcpL._UXNaN_FMjpg_QL85_.jpg">
      </div>
      <span>Album Two</span>
    </div>


    <div class="slot">
      <div class="cd">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQysQtNKp96SR6B51j7GUSC5qnMPRyfzqMwjoWVtFNKDg&s=10">
      </div>
      <span>Album Three</span>
    </div>


    <div class="slot">
      <div class="cd">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrlCqblfaJTShjbFsY0IeBCs9htSkgfO9dWsazxIIqDw&s=10">
      </div>
      <span>Album Four</span>
    </div>


    <div class="slot">
      <div class="cd">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwJObEFU0_un4RYs-7DkvndFwgy4jE5mgIguJ2IzBIOg&s=10">
      </div>
      <span>Album Five</span>
    </div>


    <div class="slot">
      <div class="cd">
        <img src="https://www.dutchvinyl.com.au/cdn/shop/files/orig_13748509_1193642_20250523075717_1024x1024_f031b58c-4107-41db-9e84-731c0559afa9_1024x1024.webp?v=1773031603">
      </div>
      <span>Album Six</span>
    </div>


    <div class="slot">
      <div class="cd">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSD1AWP1eJZTEnDwgxnnNXdrwIfhSMu_-cZ1XrQNoX5cw&s=10">
      </div>
      <span>Album Seven</span>
    </div>


    <div class="slot">
      <div class="cd">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2ygK1OlNozKBI13MUmb38jKHo778TZCVMsn58AGaYpA&s=10">
      </div>
      <span>Album Eight</span>
    </div>


    <div class="slot">
      <div class="cd">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMAe6lYWwA3JzDwqtX12PtW35DDJBSFKnFEAMGIQTd3Lci-axfiH-y3L0&s=10">
      </div>
      <span>Album Nine</span>
    </div>


    <div class="slot">
      <div class="cd">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTflLmnFOVfj7J0-sFbH4orqQMYWNwFUQRDiF6Y1GK9aA&s=10">
      </div>
      <span>Album Ten</span>
    </div>


  </div>


  <div class="lights">
    ● ● ●
  </div>

</div></style>