javascript jquery, Mouseover event

Question

here is my code in which i only know the mouse over and is working completely fine, but it mouse over the whole picture and i want the mouse over from the inside as well as the a slight zoom-in, here is the site from which you can see what am i asking for? ( https://woodmart.xtemos.com/demo-grocery/demo/grocery/# ) when you scroll down to the ads and then you hover on ads you can experience mouseover from the inside as well as a slight zoom-in. Thanks in advance.


<body>
    <div class="page-container">
        <div class="page-back">
            
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        var windowWidth = $(window).width();

        $('.page-back').mouseover(function(event){
            var moveX = (($(window).width() / 2) -event.pageX)*0.1;
            var moveY = (($(window).height() / 2) -event.pageY)*0.1;
            $('.page-back').css('margin-left', moveX +'px');
            $('.page-back').css('margin-top', moveY +'px');
        });
    </script>
</body>
here is its css

.page-container{
    width: 50%;
    height: 50%;
    position: fixed;
    background-color: #fff;
}
.page-back{
    width: 100%;
    height: 100%;
    left: -20%;
    top: -10%;
    position: absolute;
    background-image: url('https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2020/06/wood-food-market-ban-1-opt.jpg');
    background-size: 500px;
    background-position: center;
}

Answer 1

You don't actually need Js for this. You can do this using CSS.

HTML :

<div class="page-container">
            <div class="page-back">    
            </div>
    </div>

CSS :

.page-container{
    width: 300px;
    height: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    position: relative;
}

.page-back{
    width: 100%;
    height: 100%;
    background: url('https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2020/06/wood-food-market-ban-1-opt.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 1s;
}

.page-back:hover{
    transform: scale(1.2);
}

The main thing here is setting overflow : hidden on page-container . This will do the job. But the background image scales only when hovered on the image and not on any elements inside. For that you need Js.

Js :

$(document).ready(function() {
  
  $('.page-container').mouseover(function() {
      $(this).find('.page-back').css('transform', 'scale(1.2)');
  });

  $('.page-container').mouseout(function() {
      $(this).find('.page-back').css('transform', 'scale(1)');
  });

});

javascript jquery, Mouseover event

Question

1 answers

solution1
0 2020-09-12 08:47:53

javascript jquery, Mouseover event

Question

1 answers

solution1 0 2020-09-12 08:47:53

solution1
0 2020-09-12 08:47:53