Enhance Your Website with Bootstrap 4 Card Image Zoom

Is it possible to add an image zoom effect to Bootstrap 4 cards? I found some inspiration at . Below are the codes I have used:

<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>

javascriptjquerycssbootstrap-4twitter-bootstrap-4

Answer №1

You have the option to enclose them in a new container, specify overflow: hidden for that container, and utilize scale() on the image upon hovering over the parent container. Additionally, I incorporated a partially transparent overlay similar to the website you mentioned.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions for modifying the color of the close button in the angularjs ui-select module

I am currently using ui-select for multiple selection in a dropdown. When an item is selected, it displays a cross button on the upper right corner of the selected item. Is there a way to change the color of the cross button to red? <ui-select multip ...

javascriptangularjsui-select

The text does not automatically move to the next line

How can I make the content in this form section wrap to the next line in a list-item and overlap the width of the div content? The second line, particularly where it mentions Security Question two https://i.sstatic.net/5CVi2.png This is my HTML & CS ...

htmlcss

Discover the location following a designated distance along a direct path connecting two points in the Google Maps API

Using the Google Maps API, I have plotted a straight line from point P1 to point P2. Both points have latitude and longitude coordinates available. I am interested in finding a point (P) along this straight line, located at a specific distance from P1. F ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Hermes js engine encounters a TypeError when attempting to access the property '__expo_module_name__' of an undefined value

After updating my expo and react native app to the latest version, I encountered a problem that I couldn't find a solution for despite searching on Google. Link to image ...

javascriptreactjstypescriptreact-native

What is the best way to implement a custom SVG icon within the Vuetify v-icon component?

Is it possible to utilize the v-icon component in Vuetify to display a custom icon that has been defined as an SVG in a file named my-icon.svg? This SVG file is located within the public/img directory of my project. How can I reference this file inside t ...

cssvue.jsvuetify.js

Creating a transcluding element directive in AngularJS that retains attribute directives and allows for the addition of new ones

I've been grappling with this problem for the past two days. It seems like it should have a simpler solution. Issue Description The objective is to develop a directive that can be used in the following manner: <my-directive ng-something="somethi ...

javascriptangularjsangularjs-directivetransclusion

Creating a rhombus or parallelogram on a canvas can be easily achieved by following these simple

I'm new to working with the canvas element and I want to create some shapes on it. Can someone provide me with guidance on how to draw a Rhombus or Parallelogram on a canvas? Something similar to what is shown in this image: https://i.stack.imgur.c ...

javascripthtmlcanvas

Can a file be successfully retrieved using an HTTP POST request?

Can a file be downloaded using HTTP POST method? I am aware of the "Get" method (windows.location), but in my scenario, there are many parameters that need to be sent to the server. ...

javajavascriptajaxhttp

Pattern matching using regular expressions can detect any number from 1 to 9 except for 2

Looking for a regular expression pattern that can match any number from 1 to 9, excluding the number 2? Here's my attempt: ([1-9][^2]) Unfortunately, this pattern doesn't seem to be working for me. ...

javascriptjqueryregex

Get multiple increment buttons functioning

I've managed to create an increment counter that updates the value in a .txt file on my server every time I click a button by +1. It's working flawlessly and here's how it looks like: <!DOCTYPE html> <html> <head> <meta ...

javascriptphpjqueryajax

Transfer information to the form through a hyperlink

I need help with a script that sends data to a form when a link is clicked. What I'm trying to achieve is to have the data appear in the form when the user clicks the link below, which is generated from a database. <div id="menu_bar" region="west ...

phpjquerymysqljsonjquery-easyui

Creating a FusionCharts time series with a sleek transparent background

Currently, I am attempting to achieve a transparent background for a time-series chart created with FusionCharts. Despite trying the standard attributes that usually work on other chart types and even hardcoding a background color, none of these seem to af ...

cssreactjssvgfusioncharts

ReactJS experiencing issue with the functionality of the all-the-cities library

Encountering an issue where importing the library all-the-cities causes reactjs to malfunction and display the following error: TypeError: fs.readFileSync is not a function (anonymous function) C:myproject/node_modules/all-the-cities/index.js:6 3 | cons ...

javascriptnode.jsreactjsnpm

Methods for transforming a TypeScript class instance containing getter/setter properties into a JSON format for storage within a MySQL database

I am currently working on a TypeScript class that includes a getter and setter method: export class KitSection { uid: string; order: number; set layout(layout: KitLayout) { this._layout = new KitLayout(layout); } get layout( ...

javascriptjsontypescript

Modifying certain elements in a text to emphasize (PHP)

Running JavaScript code smoothly is not a problem for me, but unfortunately, I am facing difficulties when it comes to PHP. I wish to change certain words in the text for emphasis. How can I achieve this? var terms = 'term1#term2#term3'; ...

javascriptphp

Exploring the Power of Ajax with JQuery on the Django Development Server

I am currently setting up an Ajax request using JQuery (version 1.5) on a Django website running version 1.2.5. I am testing this on the Development Server as I intend to demonstrate it before deploying to production. Below is the javascript code snippet ...

javascriptpythonajaxdjango

I am trying to set up an AJAX call in my index.html to connect to a React endpoint, but instead of accessing the intended page, I am getting

I am attempting to execute an AJAX call in my static file index.html to a React endpoint, but instead of the desired response, I am seeing the React homepage. Here is the code snippet from my index.html: <div id="data"></div> <scr ...

javascriptreactjsajax

Learn how to use Bootstrap 4 to selectively filter through a list by their data attribute values

I am currently working with a PHP form that looks like this: <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search"> <label class="assistive-text" for="s"> &l ...

twitter-bootstrapbootstrap-4

Having trouble with installing Node Windows NPM?

I'm attempting to install a simple package in Node.js, but when I use the standard command, it indicates that it cannot find the file or directory (refer to the image below). Despite updating and re-installing npm, the issue persists. I am using Windo ...

javascriptnode.jswindowsnpm

A guide to implementing child level filtering of JSON data with Lodash

Here is a JSON dataset I am working with: [ { "campaignId": 111, "campaignCategory": "Diabetes", "result": [ { "campaignType": 1, "name": "tes1" }, { "campaignType": 1, "name": "test22" ...

javascriptjsonlodash