In this post we are giving you bootstrap 4 zoom image on image hover. this is bootstrap 4 magnifying plugin for zoom image part. this plugin work like magnifying glass. it's a light weight package for image hover zooming. this plugin also work without bootstrap.
We allows to free snippets of bootstrap magnifying image on hover , you can download full code of jquery magnifying glass effect layout. Here in this post i will give you example of bootstrap image zoom plugin on hover snippet and you will get simple code of html, css and jquery. In simple image zoom on mouseover snippet i give you three tab with html, css and js, you can easily get code of bootstrap image zoom on click layout.
<!DOCTYPE html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="custom.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-magnify/0.3.0/css/bootstrap-magnify.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 main-section">
<div class="image-section">
<h1> Bootsrap 4.0 Magnify Design </h1>
<img data-toggle="magnify" src="//nicesnippets.com/demo/men-casual-shoes-loafers-shoes-custom-handmade.jpg" alt="">
<p class="pt-5 m-0">Create by : <span class="badge badge-dark p-2"><a href="//nicesnippets.com" target="_blank">nicesnippets.com</a></span></p>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-magnify/0.3.0/js/bootstrap-magnify.min.js"></script>
</body>
</html>
body{
background-color:#123038 !important;
}
.image-section{
padding:30px;
margin-top:20px;
background-color:#fff;
font-family: 'Arima Madurai', cursive !important;
}
.main-section{
position: relative;
top:50%;
left:50%;
transform: translate(-50%,10%);
}
.image-section h1{
border-radius:8px;
text-align:center;
color:green;
font-weight: bold;
font-size:22px;
padding: 10px;
letter-spacing: 2px;
margin:0px 0px 30px 0px;
}
.image-section p span a{
color:#fff;
letter-spacing: 2px;
text-decoration: none;
}
.image-section img {
width:100%;
height: auto;
}