card information

Open In Editor Publish Your Code

<div class="container">
  <div style="--clr:#89ec5b;" class="box">
    <div class="content">
      <div class="icon"></div>
      <div class="text">
        <h3>Designing</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
          obcaecati?
        </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
  <div style="--clr:#eb5ae5;" class="box">
    <div class="content">
      <div class="icon"></div>
      <div class="text">
        <h3>Development</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
          obcaecati?
        </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
  <div style="--clr:#5b98eb;" class="box">
    <div class="content">
      <div class="icon"></div>
      <div class="text">
        <h3>SEO</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
          obcaecati?
        </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
</div>

CSS

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 60px 0;
  gap: 60px;
}
.container .box {
  position: relative;
  width: 300px;
  height: 350px;
  background: #2e2e2e;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .box::before {
  content: "";
  position: absolute;
  inset: -10px 50px;
  border-top: 4px solid var(--clr);
  border-bottom: 4px solid var(--clr);
  z-index: -1;
  transform: skewY(15deg);
  transition: 0.5s ease-in-out;
}
.container .box:hover:before {
  transform: skewY(0);
  inset: -10px 40px;
}

.container .box::after {
  content: "";
  position: absolute;
  inset: 60px -10px;
  border-left: 4px solid var(--clr);
  border-right: 4px solid var(--clr);
  z-index: -1;
  transform: skew(15deg);
  transition: 0.5s ease-in-out;
}
.container .box:hover::after {
  transform: skew(0);
  inset: 40px -10px;
}
.container .box .content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 20px;
  padding: 0 20px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container .box .content .icon {
  color: var(--clr);
  width: 80px;
  height: 80px;
  box-shadow:
    0 0 0 4px #2e2e2e,
    0 0 0 6px var(--clr);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5em;
  background: #2e2e2e;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .icon {
  background: var(--clr);
  color: #2e2e2e;
  box-shadow:
    0 0 0 4px #2e2e2e,
    0 0 0 300px var(--clr);
}
.container .box .content .text h3 {
  font-size: 1.5em;
  color: #fff;
  font-weight: 500;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text h3 {
  color: #2e2e2e;
}
.container .box .content .text p {
  color: #999;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text p {
  color: #2e2e2e;
}
.container .box .content .text a {
  position: relative;
  background: var(--clr);
  color: #2e2e2e;
  padding: 8px 15px;
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text a {
  background: #2e2e2e;
  color: var(--clr);
}

card information

Recommended

Glowing Gradient Glassmorphism Card

Parallax Depth Cards

Animated Weather Card

HTML

CSS

JS

Recommended

Glowing Gradient Glassmorphism Card

Parallax Depth Cards

Animated Weather Card

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS