€<body>
  <div class="container">
    <div class="popsicle-container">
      <div class="popsicle-top"/></div>
      <div class="popsicle-base"></div>
      <div class="stick"></div>
    </div>
  </div>
</body>


.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 1rem;
}

.popsicle-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height:  30rem;
  width: 12rem;
}

.popsicle-container:hover {
  animation: pulse 2s ease-in infinite;
}

.popsicle-base {
  position: relative;
  height: 20%;
  width: 100%;
}

.popsicle-base::before, .popsicle-base::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-bottom-right-radius: 10%;
  border-bottom-left-radius: 10%;
  transform: skewY(-5deg);
}

.popsicle-base::after {
  background: radial-gradient(ellipse at top, rgba(241, 240, 240, 0.74), #ffcbd8 60%);
  background-color: #f3f3f3;
}

.popsicle-base::before {
  right: -1.5rem;
  top: -0.15rem;
  background-color: #ffbdce;
}

.popsicle-top {
  position: relative;
  height: 60%;
  width: 100%;
  border-top-left-radius: 35%;
  border-top-right-radius: 35%;
}

.popsicle-top::before, .popsicle-top::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-top-left-radius: 35%;
  border-top-right-radius: 35%;
  transform: skewY(-5deg)
}

.popsicle-top::before {
  right: -1.5rem;
  background: #86c8e4;
}

.popsicle-top::after {
  background: radial-gradient(ellipse at bottom,  rgba(241, 240, 240, 0.74), rgba(152, 208, 241, 0.877) 80%);
  background-color: #97DFFC;
}

.stick {
  width: 12%;
  height: 20%;
  position: relative;
}

.stick::before, .stick::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-bottom-left-radius: 10%;
  border-bottom-right-radius: 10%;
  box-shadow:
  inset 0 0 1rem rgb(236, 187, 113),
  inset 0 0.5rem 0.7rem -0.3rem rgba(0,0,0,0.4);
  transform: skewY(-5deg)
}

.stick::after {
  background-color: #F3D4A5;
}

.stick::before {
  right: -0.5rem;
  background-color: rgb(219, 183, 128);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.