CSS Chocolate box - Lena Design

To learn how to create the CSS Chocolate box follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website, click here.

Step1.

Add HTML

<div class="chocolate-box">
  <div class="chocs">
    <div id="top-left" class="top-left"></div>
    <div id="top-right" class="top-right"></div>
    <div id="bottom-left" class="bottom-left"></div>
    <div id="bottom-right" class="bottom-right"></div>
  </div>
  <div class="box-bottom"></div>
  <div class="cover"></div>
  <div id="white">White Chocolate</div>
  <div id="milk">Milk Chocolate</div>
  <div id="truffle">Chocolate truffle</div>
  <div id="truffle2">Chocolate truffle</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5b8b5;
  overflow: hidden;
}

.chocolate-box {
  position: relative;
  height: 300px;
  width: 300px;
  cursor: pointer;
}

Style and animate the box:

.chocolate-box:before, .chocolate-box:after {
  content:"";
  position: absolute;
}

.chocolate-box:before {
  width: 160px;
  height: 160px;
  background-color: #4b301b;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  box-shadow: 10px 10px #392312;
}

.chocolate-box:after {
  width: 68px;
  height: 68px;
  background-color: #2b0900;
  top:81px;
  left: 80px;
  box-shadow: 70px 0 #2b0900, 70px 70px #2b0900, 0px 70px #2b0900;
}

.chocs {
  position: absolute;
  z-index:1;
}

.top-left {
  top:92px;
  left:90px;
}

.top-left:hover {
  transform: rotate(25deg);
}

.top-left:active {
  opacity:0;
}

.bottom-right {
  left:162px;
  top: 162px;
}

.bottom-right:hover {
  transform: rotate(25deg);
}

.bottom-right:active {
  opacity:0;
}

.top-left, .bottom-right {
  position: absolute;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: #d12511;
  box-shadow: 20px 0 #d12511;
  filter: drop-shadow(2px 2px #ab1503) drop-shadow(-2px 2px #ab1503);
  transition: .2s;
}

.top-left:after, .top-left:before, .bottom-right:before, .bottom-right:after {
  content:"";
  position: absolute;
}

.top-left:before, .bottom-right:before {
  width: 30px;
  height: 30px;
  background-color: #d12511;
  transform: rotate(-45deg);
  top:10px;
  left:10px;
}

.top-left:after, .bottom-right:after {
  border-radius: 50%;
  background-color: rgba(255,255,255,.3);
  width:10px;
  height: 10px;
  top:5px;
  left:35px;
}

.top-right {
  position: absolute;
  border-radius: 50%;
  background-color: #fee8c0;
  width:45px;
  height: 45px;
  top:92px;
  left: 162px;
  filter: drop-shadow(2px 2px #ceb587) drop-shadow(-2px 2px #ceb587);
  overflow: hidden;
  transition: .2s;
}

.top-right:before, .top-right:after {
  content:"";
  position: absolute;
  background-color: #93522b;
  width:100px;
  height: 3px;
  left:-5px;
}

.top-right:before {
  top:15px;
  transform: rotate(-35deg);
  box-shadow: 0 -15px #93522b;
}

.top-right:after {
  top:0;
  transform: rotate(-15deg);
  box-shadow: 0 17px #93522b, 0 30px #93522b;
}

.bottom-left:hover {
  transform: rotate(25deg);
}

.bottom-left:active {
  opacity:0;
}

.top-right:hover {
  transform: rotate(25deg);
}

.top-right:active {
  opacity:0;
}

.bottom-left {
  position: absolute;
  border-radius: 50%;
  background-color: #503520;
  width:45px;
  height: 45px;
  top:162px;
  left: 92px;
  filter: drop-shadow(2px 2px #342010) drop-shadow(-2px 2px #342010);
  overflow: hidden;
  transition: .2s;
}

.bottom-left:before, .bottom-left:after {
  content:"";
  position: absolute;
  background-color: #fde7c7;
  width:100px;
  height: 3px;
  left:-5px;
}

.bottom-left:before {
  top:15px;
  transform: rotate(-35deg);
  box-shadow: 0 -15px #fde7c7;
}

.bottom-left:after {
  top:0;
  transform: rotate(-15deg);
  box-shadow: 0 17px #fde7c7, 0 30px #fde7c7;
}

.box-bottom {
  position: absolute;
  background-color: #392312;
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  left:222px;
  top:73px;
  z-index:-1;
  box-shadow: 0px 211px #392312;
}

.cover {
  position: absolute;
  background-color: #cf2611;
  width:150px;
  height: 150px;
  border: 5px solid #ae1605;
  z-index:2;
  top:70px;
  left:70px;
  transform-origin: top;
  transition: .2s;
  overflow: hidden;
}

.chocolate-box:hover .cover {
  transform: rotateX(170deg);
  box-shadow: 5px -5px 20px rgba(0,0,0,.5);
}

.chocolate-box:hover .cover:before {
  display: none;
}

.cover:before {
  position: absolute;
  content:"Hover Me";
  color: #ffead2;
  font-family: "Brush Script MT", cursive;
  padding-top: 17px;
  padding-bottom: 17px;
  padding-left: 25px;
  padding-right: 25px;
  font-size: 35px;
  transform: translate(-50%,-50%);
  left:50%;
  top:50%;
  text-align: center;
  border: 2px double;
}

.cover:after {
  position: absolute;
  content:"";
  background-color: #ffead2;
  height:10px;
  width: 100px;
  transform: rotate(-45deg);
  left:-20px;
  box-shadow: -5px 165px #ffead2;
}

#white, #milk, #truffle, #truffle2 {
  position: absolute;
  width: 100%;
  display: none;
  color: #ffead2;
  font-family: "Brush Script MT", cursive;
  font-size: 25px;
  transition: .1;
}

#white {
  top:100px;
  left: 250px;
}

#milk {
  top:170px;
  left:-70px;
}

#truffle {
  left: 250px;
  top: 170px;
}

#truffle2 {
  left: -70px;
  top: 100px;
}

Step3.

Add jQuery

*to read how to add jQuery to HTML click here.

$(document).ready(function(){
    $("#top-right").on('mouseenter',function() {
        $("#white").show();
    });
    $("#top-right").on('mouseout',function() {
        $("#white").hide();
    });
});

$(document).ready(function(){
    $("#bottom-left").on('mouseenter',function() {
        $("#milk").show();
    });
    $("#bottom-left").on('mouseout',function() {
        $("#milk").hide();
    });
});

$(document).ready(function(){
    $("#bottom-right").on('mouseenter',function() {
        $("#truffle").show();
    });
    $("#bottom-right").on('mouseout',function() {
        $("#truffle").hide();
    });
});

$(document).ready(function(){
    $("#top-left").on('mouseenter',function() {
        $("#truffle2").show();
    });
    $("#top-left").on('mouseout',function() {
        $("#truffle2").hide();
    });
});

Watch also the video tutorial: