rotating ring card

by Saksham Malhotra

HTML

<div class="card">
  <div class="icon">
    <svg height="80px" width="80px" class="circle1">
                <circle cx="40" cy="40" r="35" stroke="black" fill="transparent" stroke-width="5px" stroke-dasharray="22,22" />
            </svg>
    <svg height="80px" width="80px" class="circle2">
                <circle cx="40" cy="40" r="35" stroke="black" fill="transparent" stroke-width="5px" stroke-dasharray="22,22" />
            </svg>
  </div>
  <div class="heading">Sample Item</div>
  <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id consequatur hic odit error nesciunt, delectus voluptate neque iure beatae! Qui hic cupiditate placeat deserunt omnis, atque officiis tempora cumque dolores.</div>
  <div class="more"></div>
</div>

CSS

body {
  background-color: #006266dd;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  box-shadow: 0px 0px 10px 3px rgba(100, 100, 100, 0.3);
  font-family: Arial;
  padding: 30px;
  width: 300px;
  border-radius: 5px;
  background-color: #FFF;
  cursor: pointer;
  transition: box-shadow 0.2s linear;
}

.heading {
  padding: 30px 0px;
  font-size: 2rem;
  text-align: center;
}

.more {
  font-size: 0.5rem;
}

.icon {
  margin: 0 auto;
  height: 80px;
  width: 80px;
  position: relative;
  background-image: url('pocket.svg');
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}

.icon svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform-origin: center;
}

.circle2 {
  transform: rotate(-36deg);
  transition: transform 0.2s linear;
}

.card:hover {
  box-shadow: 0px 0px 15px 5px rgb(70, 70, 70);
}

.card:hover .circle2 {
  transform: rotate(0deg);
}