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=""> <link href="" rel="stylesheet"> <link rel="stylesheet" href=""> </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="" alt=""> <p class="pt-5 m-0">Create by : <span class="badge badge-dark p-2"><a href="" target="_blank"></a></span></p> </div> </div> </div> </div> <script src=""></script> <script src=""></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; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:

Random Post