Css Card Hover effect | Discover Price On Hover Card - Codewithrandom

Css  Card Hover effect | Discover Price On Hover Card - Codewithrandom

Css  Card Hover effect | Discover Price On Hover Card - Codewithrandom


Welcome🎉 to Code With Random blog. In this blog, we learn how to create a Price Card Hover. We use HTML & CSS  for Price Card Hover. Hope you enjoy our blog so let's start with a basic HTML structure for the Price Card Hover. 

HTML code

 <section class="section-prices">  
 <h2 class="section-header">Our Pricing</h2>  
 <div class="list-boxs">  
      <div class="card starter">  
           <div class="head">  
                Starter  
           </div>  
           <div class="ticket">$5.90</div>  
           <div class="body">  
                <p>  
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et  
                     dolore  
                     magna  
                     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
                     consequat.  
                </p>  
                <button class="btn">Order Now</button>  
           </div>  
      </div>  
      <div class="card standard">  
           <div class="head">  
                Standard  
           </div>  
           <div class="ticket">$10.50</div>  
           <div class="body">  
                <p>  
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et  
                     dolore  
                     magna  
                     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
                     consequat.  
                </p>  
                <button class="btn">Order Now</button>  
           </div>  
      </div>  
      <div class="card premium">  
           <div class="head">  
                Premium  
           </div>  
           <div class="ticket">$15.90</div>  
           <div class="body">  
                <p>  
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et  
                     dolore  
                     magna  
                     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
                     consequat.  
                </p>  
                <button class="btn">Order Now</button>  
           </div>  
      </div>  
 </div>  
 </section>  
There is all HTML code for the Price Card Hover. Now, you can see output without CSS, then we write CSS for the Price Card Hover.
Output
Css  Card Hover effect | Discover Price On Hover Card - Codewithrandom

CSS code

 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;700&display=swap');  
 :root {  
  --ticket-height: 60px;  
  --color-blue: lightblue;  
  --color-orange: salmon;  
  --color-green: greenyellow;  
 }  
 * {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
 }  
 body {  
  min-height: 100vh;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  background-color: #F1F1F1;  
  font-family: 'Open Sans', sans-serif;  
  background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);  
 }  
 .section-prices {  
  padding: 1.5rem 1rem;  
 }  
 .section-prices .section-header {  
  background-color: #FFF;  
  margin-bottom: 1rem;  
  padding: 1.5rem 1rem;  
  text-align: center;  
  color: #555;  
  font-weight: 700;  
  box-shadow: 0 10px 35px -10px rgba(0, 0, 0, .3);  
 }  
 .list-boxs {  
  display: flex;  
  justify-content: space-between;  
  flex-wrap: wrap;  
 }  
 .list-boxs .card {  
  width: 32%;  
  text-align: center;  
  position: relative;  
  max-width: 300px;  
 }  
 .list-boxs .card .head,  
 .list-boxs .card .body {  
  background-color: #FFF;  
  padding: 1.5rem 1rem;  
 }  
 .list-boxs .card .head {  
  color: #333;  
  font-size: 1.2rem;  
  text-transform: uppercase;  
  transform: translateY(30px);  
  transition: transform .3s linear;  
  border-bottom: 1px solid #F2F2F2;  
 }  
 .list-boxs .card:hover .head {  
  transform: translateY(0);  
  box-shadow: 0 -5px 10px rgba(0, 0, 0, .1);  
 }  
 .list-boxs .card .ticket {  
  color: #FFF;  
  width: 80%;  
  margin: 0 auto;  
  padding: 1rem;  
  font-size: 1.4rem;  
  font-weight: bold;  
  height: var(--ticket-height);  
  box-shadow: inset 0px 6px 6px -5px rgba(0, 0, 0, .25),  
        inset 0px -6px 6px -5px rgba(0, 0, 0, .25);  
 }  
 .list-boxs .starter .ticket {  
  background-color: var(--color-green);  
 }  
 .list-boxs .standard .ticket {  
  background-color: var(--color-blue);  
 }  
 .list-boxs .premium .ticket {  
  background-color: var(--color-orange);  
 }  
 .list-boxs .card .body {  
  transform: translateY(-30px);  
  transition: transform .3s linear;  
 }  
 .list-boxs .card:hover .body {  
  transform: translateY(0);  
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);  
 }  
 .list-boxs .card p {  
  font-size: .95rem;  
  color: #333;  
  text-align: justify;  
 }  
 .list-boxs .card .btn {  
  margin-top: 2rem;  
  padding: .6rem 1rem;  
  outline: none;  
  font-size: .85rem;  
  font-family: 'Open Sans', sans-serif;  
  font-weight: 500;  
  min-width: 160px;  
  border: 1px solid #555;  
  background-color: #555;  
  color: #333;  
  cursor: pointer;  
  transition: all .2s linear;  
 }  
 .list-boxs .card .btn:hover {  
  box-shadow: 0 5px 10px 1px rgba(0, 0, 0, .15);  
 }  
 .list-boxs .starter .btn {  
  background: var(--color-green);  
  border-color: var(--color-green);  
 }  
 .list-boxs .standard .btn {  
  background: var(--color-blue);  
  border-color: var(--color-blue);  
 }  
 .list-boxs .premium .btn {  
  background: var(--color-orange);  
  border-color: var(--color-orange);  
 }  
 @media screen and (max-width: 750px) {  
  .list-boxs {  
   justify-content: space-around;  
  }  
  .list-boxs .card {  
   width: 45%;  
  }  
 }  
 @media screen and (max-width: 550px) {  
  .list-boxs .card {  
   width: 95%;  
  }  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output
Css  Card Hover effect | Discover Price On Hover Card - Codewithrandom

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Price Card Hover, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Price Card Hover using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

code by - Ayoub Mkira

Check out more.....

Post a Comment

Previous Post Next Post