CODEWITHSUNDEEP
jqueryhtmlcssimage
rufus
rufus

Reputation: 857

How to scroll to the bottom of an image on hover

Hi i am just curious to know the best way to go about being able to scroll to the bottom of an image on hover. The image is in a wrapper with overflow hidden applied to it as its quite long. Ideally a smooth scroll to the bottom is what I am looking for to see the rest of the hidden image.

I have been playing around with jquery trying to get it to work but i have got into a muddle. Not sure if I am on the right track with my code or not really.

Appreciate any help

$('#image-wrap img').on('hover', function() {
  var target = $(this),
    height = target.height(),
    scrollHeight = target.prop('scrollHeight');

  target.animate({
    scrollTop: scrollHeight - height
  }, 2000);
});
#main-wrapper {
  width: 600px;
  margin: 0 auto;
}

#box-wrapper {
  position: relative;
}

#box {
  width: 100%;
  height: 400px;
  border: 1px black solid;
  position: relative;
}

#image-wrap {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

#image-wrap img {
  position: absolute;
  top: 0;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-wrapper">
  <div id="box-wrapper">
    <div id="box">
      <div id="image-wrap">
        <img src="http://via.placeholder.com/600x2000" />
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 2480

Answers (5)

G&#252;ney Saramalı
G&#252;ney Saramalı

Reputation: 799

I understand now how you would like to it to be.

HTML

$(document).ready(function(){
  $('#img-holder').mouseenter(function(){
    var x = $('img').height();
    x = x-400;
    $('img').animate({'position':'absolute','top':'-'+x}, 300);
  });
   $('#img-holder').mouseleave(function(){
     $('img').css({'position':'relative','top':'0'});
   });
});
#img-holder{
  width:100%;
  height:400px;
  border:2px solid;
  overflow:hidden;
  position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img-holder">
  <img src="https://blog.hittail.com/wp-content/uploads/sites/8/2013/01/hidden-value-of-long-tail-seo-1000.png" width="100%">
</div>

The idea is making the position of the img absolute and give it a value to display the bottom part.

Here is a working DEMO

Upvotes: 1

Germano Plebani
Germano Plebani

Reputation: 3655

You can use simply CSS3. On hover add transition transform: translateY(-100%), but it's not smart like the jquery solution.

#main-wrapper {
  width: 600px;
  margin: 0 auto;
}

#box-wrapper {
  position: relative;
}

#box {
  width: 100%;
  height: 400px;
  border: 1px black solid;
  overflow: hidden;
}

img {
    transition: all 2000ms ease-out;
}

#box:hover img {
    transform: translateY(-100%);
}
<div id="main-wrapper">
  <div id="box-wrapper">
    <div id="box">
        <img src="http://lorempixel.com/400/1000/sports/" />
    </div>
  </div>
</div>

Upvotes: 4

Julio Feferman
Julio Feferman

Reputation: 2676

Please try the following:

$('#image-wrap img').hover(function() {
  $('html, body').animate({
        scrollTop: $(this).offset().top + $(this).outerHeight()
    }, 2000);
});
#main-wrapper {
  width: 600px;
  margin: 0 auto;
}

#box-wrapper {
  position: relative;
}

#box {
  width: 100%;
  height: 400px;
  border: 1px black solid;
  position: relative;
}

#image-wrap {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

#image-wrap img {
  position: absolute;
  top: 0;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-wrapper">
  <div id="box-wrapper">
    <div id="box">
      <div id="image-wrap">
        <img src="http://via.placeholder.com/600x2000" />
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Korgrue
Korgrue

Reputation: 3478

If the image is hidden, you cannot interact with it. If it is visible, you can use scrollTo() like this.

  1. Capture the current scroll position using scrollTop()

    var pos = $('your image container').scrollTop();

  2. Grab the height of the image container

    var height = $('your image container').height();

  3. Add the two values

    var moveto = pos + height;

  4. Autoscroll to the position

    window.scrollTo( 0, moveto );

Upvotes: -1

steveniclas
steveniclas

Reputation: 124

So I guess you want to scroll the whole page (kinda like using your mouse-wheel)?

You could do something like this:

$('#image-wrap img').on('hover', function() {
  var target = $(this),
    height = target.height(),
    scrollHeight = target.offset().top;

    $('body,html').animate({
         scrollTop:scrollHeight+height-500
    },500);
});

This would then scroll the page, so the last 500px of the image are visible. If that doesn't solve your problem, an example with the whole page would be helpful.

Upvotes: -2

Related Questions