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="http://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="http://nicesnippets.com" target="_blank">nicesnippets.com</a></span></p> </div> </div> </div> </div> <script src="http://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; }

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





Random Post