Home / css / Image hover Zoom In Zoom Out using Bootstrap Cards and CSS

Image hover Zoom In Zoom Out using Bootstrap Cards and CSS

LIVE DEMO

 CODE

  • HTML
  • Style.css
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
        <link rel="stylesheet" href="style.css" >
    </head>
<body class="bg-grad py-5">
<div class="container " >
    <div class="row">
            <div class="col-md-4">
                    <div class="card mb-4 shadow-md">
                      <div class="heffect">
                         <img class="card-img-top" src="vintagecar1.jpeg" alt="Card image cap">
                      </div>
                      <div class="card-body text-center">
                        <h5 class="card-title">Vintage</h5>
                        <p class="card-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos.</p>
                       
                            <a href="#" class="btn btn-md btn-success">Get Details</a>
                         
                        
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="card mb-4 shadow-md">
                        <div class="heffect">
                            <img class="card-img-top" src="vintagecar2.jpg" alt="Card image cap">
                        </div>
                      
                      <div class="card-body text-center">
                          <h5 class="card-title">Vintage</h5>
                        <p class="card-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos.</p>
                       
                            <a href="#" class="btn btn-md btn-success">Get Details</a>
                          
                        
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="card mb-4 shadow-md">
                        
                        <div class="heffect">
                            <img class="card-img-top" src="vintagecar3.jpeg" alt="Card image cap">
                        </div>
                      
                      <div class="card-body text-center">
                          <h5 class="card-title">Vintage</h5>
                        <p class="card-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos.</p>
                          <a href="#" class="btn btn btn-success">Get Details</a>
                      </div>
                          
                        
                      </div>
                    </div>
                  </div>
        
    </div>
   
</div>
</body>
</html>

 

body{
    font-family: 'Montserrat';
    }
.btn{
    border: 0px;
    padding-left: 40px;
    padding-right: 40px;
    background: linear-gradient(45deg, #fda211 0%, #db36a4 100%);
    background: -moz-linear-gradient(45deg, #fda211 0%, #db36a4 100%);
    background: -webkit-linear-gradient(45deg, #fda211 0%, #db36a4 100%);
 }

.bg-grad {
    background: linear-gradient(45deg, #fda211 0%, #db36a4 100%);
    background: -moz-linear-gradient(45deg, #fda211 0%, #db36a4 100%);
    background: -webkit-linear-gradient(45deg, #fda211 0%, #db36a4 100%);
}

.card{
    border: 0 !important;
}

.heffect{
    overflow: hidden;
}

.heffect img{
 transition: all 2s ease-in;
}

.heffect:hover img{
    transform: scale(2);
}

 

 

 

Check Also

WebsiteFooter

Perfect Footer for your website using Bootstrap and Fontawesome

Perfect Footer for your website using Bootstrap and Fontawesome Even though Footer is located at …

Leave a Reply

Your email address will not be published. Required fields are marked *