title: How to resize an image while dragging a cursor using jQuery (Draggable & Resizable)
body: <p>I want to recreate the draggable event of the image in this site <a href="https://alpine-groupemichel.com/alpine-a110" rel="nofollow noreferrer">https://alpine-groupemichel.com/alpine-a110</a> .</p>
  
  <p>I managed to drag the cursor but i don't know how to resize the image following the offset().left of the cursor.</p>
  
  <pre><code>&lt;section id="wide-description" class="third"&gt;
       &lt;div class="container-fluid"&gt;
         &lt;div class="row"&gt;
           &lt;div class="-wide-image relative"&gt;
            &lt;div class="slide-img relative"&gt;
              &lt;img src="https://alpine-groupemichel.com/sites/default/files/c7de023e669081e77b86f9854f99672101ecfe5f.jpeg" alt="NOUVELLE ALPINE A110" class="img-responsive"&gt;
              &lt;div class="sliding-image"&gt;
                &lt;img src="https://alpine-groupemichel.com/sites/default/files/8ee728e0ec67b7adf195fb8b26dd20373c6869cf.jpeg" alt="NOUVELLE ALPINE A110"&gt;
              &lt;/div&gt;
              &lt;span id="drag-cursor"&gt;
                &lt;span id="slider-cursor"&gt;&lt;/span&gt;
              &lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="modelRevealInfos"&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-md-6 col-sm-6 col-xs-6 no-padding"&gt;
                  1103kg&lt;br&gt; 
                  252 ch&lt;br&gt;                        4,5 s 0-100km/h&lt;br&gt;                      &lt;/div&gt;
                &lt;div class="col-md-6 col-sm-6 col-xs-6 no-padding"&gt;
                   4 180 mm&lt;br&gt;                        1 798 mm&lt;br&gt;                          1 252 mm&lt;br&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
           &lt;/div&gt;
         &lt;/div&gt;
       &lt;/div&gt;
  &lt;/section&gt;
  
  
  
  
  
  $(document).ready(function(){
      var cursor = $('#drag-cursor');
      var img = $('.sliding-img');
      var xPos=0;
      cursor.draggable({
          axis: 'x',
          containment: $('.relative'),      
          drag: function(xPos) {
              var offset = $(this).offset();
              var xPos = offset.left;
              console.log(xPos);
          }
      });
  });
  </code></pre>