Es tan facil que solo debes de copear este código en tu página web y listo. Y ya tendras este efecto en cualquier elemento de HTML.
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<br><br>
<div class="row">
<div class="col-md-3">
<div class="card" style="width: 18rem;">
<img src="https://cdn.pixabay.com/photo/2015/05/28/14/38/ux-787980_960_720.jpg" class="card-img-top zoomP" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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-md-3">
<div class="card zoomP" style="width: 18rem;">
<img src="https://cdn.pixabay.com/photo/2015/05/28/14/38/ux-787980_960_720.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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-md-3">
<div class="card zoomP" style="width: 18rem;">
<img src="https://cdn.pixabay.com/photo/2015/05/28/14/38/ux-787980_960_720.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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-md-3 zoomP">
<div class="card" style="width: 18rem;">
<img src="https://cdn.pixabay.com/photo/2015/05/28/14/38/ux-787980_960_720.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
.zoomP{
transition: width 1.1s, height 1.1s, transform 1.1s;
-moz-transition: width 1.1s, height 1.1s, -moz-transform 1.1s;
-webkit-transition: width 1.1s, height 1.1s, -webkit-transform 1.1s;
-o-transition: width 1.1s, height 1.1s,-o-transform 1.1s;
}
.zoomP:hover{
transform: scale(1.1);
-webkit-transform:scale(1.1);
transform:scale(1.1)
}