Using jQuery and CSS, we can create a useful image gallery that can enlarge images on mouseover.
Such galleries are a great tool for products in online stores.
The only actions required by the user are mouseover and mouse out.
It's much simpler than a slideshow gallery and an on-click button for viewing and zooming images.









result:

Example galery for preview and zoom images on mouseover/out


<!DOCTYPE html>
<html>
<title>IT present- jQuery Zoom</title>
<style>
  #slideshow {
width:351px;
height:auto;
border:2px ridge silver;
}
  img {
width:350px;
height:350px;
}
  .menu {
width: 100%;
}
  .menu img {
width:23%;
height:50px;
display:inline-block;
border:1px solid silver;
}
  .zoom {
width:350px;
}
</style>
</head>
<body>

<div id="slideshow">
  <div class="zoom">
     <img src="it.png">
  </div>
<div class="menu">
<a class="a" href="#"><img src="html.png"></a>
<a class="a" href="#"><img src="css.png"></a>
<a class="a" href="#"><img src="javascript.png"></a>
<a class="a" href="#"><img src="php.png"></a>
  </div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(".a").hover(function(){
   $(".zoom").html($(this).html());
    },
          function() {
   $( ".zoom" ).html("<img src='it.png'>" );
    });
</script>

</body>
</html>





IT - information technology - present

HTML language CSS laguage JavaScript language PHP language








Privacy Policy