" Responsive CSS Cards Design with Hover Animation in HTML & CSS "
Bootstrap 4.1.1 Snippet by harunpehlivan

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Profile UI Card Design </title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container"> <div class="card"> <div class="img"> <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1590171081/HARUN_PEHL%C4%B0VAN_Image683_pqzejc.jpg"> </div> <div class="top-text"> <div class="name"> HARUN PEHLİVAN </div> <p> IT FOUNDER CEO</p> </div> <div class="bottom-text"> <div class="text"> <codersrank-widget username="harunpehlivan"></codersrank-widget> <script src="https://profile.codersrank.io/widget/widget.js"></script> </div> <div class="btn"> <a href="https://hpitgroup.glitch.me/">HP IT GROUP (TEBİM TEBİTAGEM TTGRT)</a> </div> </div> </div> <div class="card"> <div class="img"> <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1559263615/33_t6nfqn.png"> </div> <div class="top-text"> <div class="name"> HARUN PEHLİVAN </div> <p> IT FOUNDER CEO</p> </div> <div class="bottom-text"> <div class="text"> <script type="text/javascript" src="https://github-profile.com/dist/gh-profile-card.min.js"></script> <div id="github-card" data-username="harunpehlivan"></div> <div class="btn"> <a href="https://harunpeiancefodercv.glitch.me/">HARUN PEHLİVAN CEO FOUNDER CV</a> </div> </div> </div> <div class="card"> <div class="img"> <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1560469502/genellogo_u6s71a.ico"> </div> <div class="top-text"> <div class="name"> TEBİMTEBİTAGEM FM TV</div> <p> TTGRT</p> </div> <div class="bottom-text"> <div class="text"> <a onclick="window.open('http://fm.tc/live-broadcast-fm-1372.html','POPUP','width=503,height=260,scrollbars=0,resizable=0');return false;" href="#"><img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1560459863/mdialogo_dckk4m.ico" title="7/24 ONLİNE KESİNTİSİZ MÜZİK YAYINI" border="0"></a> </div> <div class="btn"> <a href="http://harunpehlivan.fm.tc/">FM TV</a> </div> </div> </div> </div> </body> </html>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } html,body{ height: 100%; display: grid; place-items: center; background: #f2f2f2; text-align: center; } .container{ padding: 0 40px; display: flex; align-items: center; justify-content: space-between; } .card{ height: 280px; max-width: 350px; margin: 0 20px; background: white; transition: 0.4s; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); } .card:hover{ height: 470px; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); } .card .img{ height: 200px; width: 100%; } .card .img img{ height: 100%; width: 100%; object-fit: cover; } .card .top-text{ padding: 5px; } .card .top-text .name{ font-size: 25px; font-weight: 600; color: #202020; } .card .top-text p{ font-size: 20px; font-weight: 600; color: #e74c3c; line-height: 20px; } .card .bottom-text{ padding: 0 20px 10px 20px; margin-top: 5px; background: white; opacity: 0; visibility: hidden; transition: 0.1s; } .card:hover .bottom-text{ opacity: 1; visibility: visible; } .card .bottom-text .text{ text-align: justify; } .card .bottom-text .btn{ margin: 10px 0; text-align: left; } .card .bottom-text .btn a{ text-decoration: none; background: #e74c3c; color: #f2f2f2; padding: 5px 8px; border-radius: 3px; display: inline-flex; transition: 0.2s; } .card .bottom-text .btn a:hover{ transform: scale(0.9); } @media screen and (max-width: 978px) { .container{ flex-wrap: wrap; flex-direction: column; } .card{ max-width: 700px; margin: 20px 0; } }

Related: See More

Paper Kit 2 Angular
Responsive Data Cards (Bootstrap 4)
Information Cards
Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments: