كيفية تكبير الصورة How To Create an Image Zoom

تعلم كيفية إنشاء تكبير الصورة.

تكبير الصورة

مرر الماوس فوق الصورة لتكبيرها:

الكود كامل والشرح في الفيديو اسفل

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body dir='rtl'>
<!--html-->
<div class="image-wrap">
    <div class="image">
       <img src="https://i.ibb.co/3mLyp3f/oranges.jpg">
    </div>
    <div class="image">
     <img src="https://i.ibb.co/3mLyp3f/oranges.jpg">
  </div>
</div>
<!--css-->
 <style>
   *{margin:0px; padding:px; box-sizing:border-box;}
   img{width:100%; height:auto;}
   .image-wrap{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:15px;
   }
   @media (max-width:460px){
     .image-wrap{ 
         grid-template-columns:repeat(1,1fr); 
     }
   }
   .image{
      width  :100%; 
      height :100%;
      background-size:100%;
      background-repeat:no-repeat;
      background-position:center; 
   
   }
   .image:hover{
      background-size:300%; 
   }
 </style>
 <!--script-->
 <script>
   const images = document.querySelectorAll(".image img"); 
   images.forEach((image)=>{
     const bgimg = image.src ;
     const parentimage = image.parentElement ;
     image.addEventListener("mousemove",(e) => {
          image.style.opacity = 0 ;
          parentimage.style.backgroundImage = "url('"+bgimg+"')";
          
          let width  = image.offsetWidth ;
          let height = image.offsetHeight ;
          let mouseX = e.offsetX ;
          let mouseY = e.offsetY ;
          let bgPosX = (mouseX / width * 100);
          let bgPosY = (mouseY / height * 100);
       
    parentimage.style.backgroundPosition = `${bgPosX}% ${bgPosY}%`;
           
});  
     
     
   });
 </script>
</body> 
</html>

كيفية تكبير الصورة How To Create an Image Zoom

مشاهدة الشرح بدون صوت