Bootstrap 4 Card Image Zoom

Comment créer mon zoom image un peu quand j'utilise un Bootstrap 4 composants appelés cartes. J'ai eu une inspiration au http://www.themezaa.com/html/leadgen/demo/seo-marketing/index.html. Les codes suivants que j'ai utilisés ci-dessous.Bootstrap 4 Card Image Zoom

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    
 

 
<div class="container"> 
 
    \t <div class="row"> 
 
    \t \t <div class="col-lg-3"> 
 
    \t \t \t <div class="card" > 
 
\t \t \t \t <img class="card-img-top" src="http://www.successmoves.co.uk/wp-content/uploads/2012/07/50708_1280x720-318x180.jpg" alt="Card image cap"> 
 
\t \t \t \t <div class="card-block"> 
 
\t \t \t \t  <h4 class="card-title">Card title</h4> 
 
\t \t \t \t  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
 
\t \t \t \t  <a href="#" class="btn btn-primary">Go somewhere</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-3"> 
 
    \t \t \t <div class="card" > 
 
\t \t \t \t <img class="card-img-top" src="http://mapleleafadventures.com/wp-content/uploads/2015/11/mv-swell-jeffreynolds-318x180.jpg" alt="Card image cap"> 
 
\t \t \t \t <div class="card-block"> 
 
\t \t \t \t  <h4 class="card-title">Card title</h4> 
 
\t \t \t \t  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
 
\t \t \t \t  <a href="#" class="btn btn-primary">Go somewhere</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-3"> 
 
    \t \t \t <div class="card" > 
 
\t \t \t \t <img class="card-img-top" src="http://www.smart-magazine.com/content/uploads/2016/09/Zaraeeb-el-seed-318x180.jpg" alt="Card image cap"> 
 
\t \t \t \t <div class="card-block"> 
 
\t \t \t \t  <h4 class="card-title">Card title</h4> 
 
\t \t \t \t  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
 
\t \t \t \t  <a href="#" class="btn btn-primary">Go somewhere</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-3"> 
 
    \t \t \t <div class="card" > 
 
\t \t \t \t <img class="card-img-top" src="http://www.professionalyachtingservices.com/wp-content/uploads/2016/06/IMG_0271rr-318x180.jpg" alt="Card image cap"> 
 
\t \t \t \t <div class="card-block"> 
 
\t \t \t \t  <h4 class="card-title">Card title</h4> 
 
\t \t \t \t  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
 
\t \t \t \t  <a href="#" class="btn btn-primary">Go somewhere</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
    \t \t </div> 
 
    \t </div> 
 
\t </div>

Source

2017-05-06 Anonymous

Vous pouvez les envelopper dans un nouvel élément, définissez overflow: hidden sur cet élément et utiliser scale() sur l'image lorsque vous passez la souris sur l'élément parent. Et j'ai également appliqué une superposition semi-opaque comme le site que vous avez référencé.

.card-img-wrap { 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.card-img-wrap:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    background: rgba(255,255,255,0.3); 
 
    opacity: 0; 
 
    transition: opacity .25s; 
 
} 
 
.card-img-wrap img { 
 
    transition: transform .25s; 
 
    width: 100%; 
 
} 
 
.card-img-wrap:hover img { 
 
    transform: scale(1.2); 
 
} 
 
.card-img-wrap:hover:after { 
 
    opacity: 1; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    
 

 
<div class="container"> 
 
    \t <div class="row"> 
 
    \t \t <div class="col-lg-3"> 
 
    \t \t \t <div class="card" > 
 
\t \t \t \t <div class="card-img-wrap"><img class="card-img-top" src="http://www.successmoves.co.uk/wp-content/uploads/2012/07/50708_1280x720-318x180.jpg" alt="Card image cap"></div> 
 
\t \t \t \t <div class="card-block"> 
 
\t \t \t \t  <h4 class="card-title">Card title</h4> 
 
\t \t \t \t  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
 
\t \t \t \t  <a href="#" class="btn btn-primary">Go somewhere</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-3"> 
 
    \t \t \t <div class="card" > 
 
\t \t \t \t <div class="card-img-wrap"><img class="card-img-top" src="http://mapleleafadventures.com/wp-content/uploads/2015/11/mv-swell-jeffreynolds-318x180.jpg" alt="Card image cap"></div> 
 
\t \t \t \t <div class="card-block"> 
 
\t \t \t \t  <h4 class="card-title">Card title</h4> 
 
\t \t \t \t  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
 
\t \t \t \t  <a href="#" class="btn btn-primary">Go somewhere</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-3"> 
 
    \t \t \t <div class="card" > 
 
\t \t \t \t <div class="card-img-wrap"><img class="card-img-top" src="http://www.smart-magazine.com/content/uploads/2016/09/Zaraeeb-el-seed-318x180.jpg" alt="Card image cap"></div> 
 
\t \t \t \t <div class="card-block"> 
 
\t \t \t \t  <h4 class="card-title">Card title</h4> 
 
\t \t \t \t  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
 
\t \t \t \t  <a href="#" class="btn btn-primary">Go somewhere</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-3"> 
 
    \t \t \t <div class="card" > 
 
\t \t \t \t <div class="card-img-wrap"><img class="card-img-top" src="http://www.professionalyachtingservices.com/wp-content/uploads/2016/06/IMG_0271rr-318x180.jpg" alt="Card image cap"></div> 
 
\t \t \t \t <div class="card-block"> 
 
\t \t \t \t  <h4 class="card-title">Card title</h4> 
 
\t \t \t \t  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
 
\t \t \t \t  <a href="#" class="btn btn-primary">Go somewhere</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
    \t \t </div> 
 
    \t </div> 
 
\t </div>

Source

2017-05-06 03:21:03

Merci monsieur! Mais le bouton "Go Somewhere" ne peut pas être cliqué maintenant. Parce que les images sont tellement superposées avec ça. @ Michael Coker –

@TechGirl oh mon mauvais, besoin de «position: relative» sur ce div div. Mise à jour ma réponse Et vous êtes les bienvenus :) –

Merci fonctionne bien !!! –

Bootstrap 4 Card Image Zoom

Répondre

Questions connexes