Text Reveal On Hover

jitesh208
Jan 28, 2026 2
Live Preview

Live Editor

<div class="morph-card">
  <div class="inner">

    <div class="icon">🧠</div>

    <h3>AI Insights</h3>
    <p class="sub">Understand your data instantly</p>

    <div class="reveal">
      <ul>
        <li>Predictive analytics</li>
        <li>Smart recommendations</li>
        <li>Real-time monitoring</li>
      </ul>
      <button>Learn More</button>
    </div>

  </div>
</div>
*{
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

body{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#0f1220;
}

/* Card */
.morph-card{
  width:320px;
  height:240px;
  background:linear-gradient(135deg,#111827,#1f2937);
  border-radius:22px;
  padding:22px;
  color:#fff;
  position:relative;
  overflow:hidden;
  transition:.45s cubic-bezier(.4,0,.2,1);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}

/* Glow border */
.morph-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(120deg,#6b7cff,#00ffd5,#9f7bff);
  opacity:0;
  filter:blur(18px);
  transition:.45s;
}

.morph-card:hover::before{
  opacity:1;
}

/* Inner */
.inner{
  position:relative;
  z-index:2;
}

/* Icon */
.icon{
  width:54px;
  height:54px;
  border-radius:16px;
  background:linear-gradient(135deg,#6b7cff,#9f7bff);
  display:grid;
  place-items:center;
  font-size:26px;
  margin-bottom:16px;
  transition:.4s ease;
}

.morph-card:hover .icon{
  transform:scale(1.1) rotate(6deg);
}

/* Title */
h3{
  font-size:20px;
  margin-bottom:6px;
}

.sub{
  font-size:13px;
  opacity:.75;
}

/* Hidden content */
.reveal{
  margin-top:20px;
  opacity:0;
  transform:translateY(10px);
  transition:.4s ease;
}

.morph-card:hover .reveal{
  opacity:1;
  transform:translateY(0);
}

.reveal ul{
  font-size:14px;
  line-height:1.6;
  padding-left:18px;
  opacity:.9;
}

/* CTA */
button{
  margin-top:16px;
  width:100%;
  padding:12px;
  border-radius:14px;
  border:none;
  background:#fff;
  color:#111;
  font-weight:600;
  cursor:pointer;
  transition:.2s ease;
}

button:hover{
  transform:translateY(-2px);
}
Categories

Text Reveal On Hover

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
