 |
| Text Box Color |
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2>01</h2>
<h3>Card One</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, placeat ea odio illo laudantium assumenda laborum aspernatur, necessitatibus vel, possimus et.</p>
<a href="#">read more</a>
</div>
</div>
</div>
</div>
<style>
.container{display:flex;justify-content:center;align-items:center;max-width:1200px;flex-wrap:wrap;padding:40px 0}.container .card{position:relative;width:320px;height:440px;box-shadow:inset 5px 5px 5px rgba(0,0,0,0.05),inset -5px -5px 5px rgba(255,255,255,0.05),5px 5px 5px rgba(0,0,0,0.05),-5px -5px 5px rgba(255,255,255,0.05);border-radius:15px;margin:30px}.container .card .box{position:absolute;top:20px;left:20px;right:20px;bottom:20px;background:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.1);border-radius:15px;display:flex;justify-content:center;align-items:center;transition:0.5s}.container .card:hover .box{transform:translateY(-50px);box-shadow:0 10px 40px rgba(0,0,0,0.3);background:linear-gradient(45deg,#f747f2,#4f29cd)}.container .card .box .content{padding:20px;text-align:center}.container .card .box .content h2{position:absolute;top:-10px;right:30px;font-size:8em;color:rgba(0,0,0,0.02);transition:0.5s;pointer-events:none}.container .card:hover .box .content h2{color:rgba(0,0,0,0.05)}.container .card .box .content h3{color:#777;font-size:1.8em;z-index:1;transition:0.5s;pointer-events:none}.container .card .box .content p{font-size:1em;font-weight:300;color:#777;z-index:1;transition:0.5s;pointer-events:none}.container .card:hover .box .content h3,.container .card:hover .box .content p{color:#fff}.container .card .box .content a{position:relative;display:inline-block;padding:8px 20px;background:#03a9f4;margin-top:15px;border-radius:20px;color:#fff;text-decoration:none;font-weight:400;box-shadow:0 10px 20px rgba(0,0,0,0.2)}.container .card:hover .box .content a{background:#ff568f}
</style>01
Card One
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, placeat ea odio illo laudantium assumenda laborum aspernatur, necessitatibus vel, possimus et.
read more