Bootstrap 4 Card Image Zoom

javascript jquery css bootstrap-4 twitter-bootstrap-4

14,463

You can wrap them in a new element, set overflow: hidden on that element and use scale() on the image when you hover over the parent element. And I also applied a semi-opaque overlay like the site you referenced.

.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">
    	<div class="row">
    		<div class="col-lg-3">
    			<div class="card" >
				  <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>
				  <div class="card-block">
				    <h4 class="card-title">Card title</h4>
				    <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>
				    <a href="#" class="btn btn-primary">Go somewhere</a>
				  </div>
				</div>
    		</div>
    		<div class="col-lg-3">
    			<div class="card" >
				  <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>
				  <div class="card-block">
				    <h4 class="card-title">Card title</h4>
				    <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>
				    <a href="#" class="btn btn-primary">Go somewhere</a>
				  </div>
				</div>
    		</div>
    		<div class="col-lg-3">
    			<div class="card" >
				  <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>
				  <div class="card-block">
				    <h4 class="card-title">Card title</h4>
				    <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>
				    <a href="#" class="btn btn-primary">Go somewhere</a>
				  </div>
				</div>
    		</div>
    		<div class="col-lg-3">
    			<div class="card" >
				  <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>
				  <div class="card-block">
				    <h4 class="card-title">Card title</h4>
				    <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>
				    <a href="#" class="btn btn-primary">Go somewhere</a>
				  </div>
				</div>
    		</div>
    	</div>
	</div>

14,463

Author by

Admin

Updated on June 04, 2022

Comments

Admin almost 2 years

How to create my image zoom a little bit when I'm using a Bootstrap 4 components called cards. I got an inspiration at http://www.themezaa.com/html/leadgen/demo/seo-marketing/index.html. The following codes I used below.

<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">
    	<div class="row">
    		<div class="col-lg-3">
    			<div class="card" >
				  <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 class="card-block">
				    <h4 class="card-title">Card title</h4>
				    <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>
				    <a href="#" class="btn btn-primary">Go somewhere</a>
				  </div>
				</div>
    		</div>
    		<div class="col-lg-3">
    			<div class="card" >
				  <img class="card-img-top" src="http://mapleleafadventures.com/wp-content/uploads/2015/11/mv-swell-jeffreynolds-318x180.jpg" alt="Card image cap">
				  <div class="card-block">
				    <h4 class="card-title">Card title</h4>
				    <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>
				    <a href="#" class="btn btn-primary">Go somewhere</a>
				  </div>
				</div>
    		</div>
    		<div class="col-lg-3">
    			<div class="card" >
				  <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 class="card-block">
				    <h4 class="card-title">Card title</h4>
				    <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>
				    <a href="#" class="btn btn-primary">Go somewhere</a>
				  </div>
				</div>
    		</div>
    		<div class="col-lg-3">
    			<div class="card" >
				  <img class="card-img-top" src="http://www.professionalyachtingservices.com/wp-content/uploads/2016/06/IMG_0271rr-318x180.jpg" alt="Card image cap">
				  <div class="card-block">
				    <h4 class="card-title">Card title</h4>
				    <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>
				    <a href="#" class="btn btn-primary">Go somewhere</a>
				  </div>
				</div>
    		</div>
    	</div>
	</div>

Admin about 7 years

Thanks sir! But the button "Go Somewhere" cannot be click right now. Because the image are so overlay with it. @Michael Coker
Michael Coker about 7 years

@TechGirl oh my bad, need position: relative on that wrapping div. Updated my answer. And you're welcome :)