Question posted in
The full documentation can be found here.

Divi theme – Auto scroll image taller than container on hover (taller image)

I would like to know how can i make the “scroll to the top upon hover” feature found in this website : http://www.creativespad.com/free-divi-layouts/

If you hover on each grid the image will scroll slowly to the top and stop there.

I already found an answer to this on stackoverflow.com
Auto scroll image taller than container on hover

But what i need is that answer without Javascript. In the above link there is a non-javascript answer but have no idea how to modify it for my long image. (see image below)

http://www.creativespad.com/free-divi-layouts/wp-content/uploads/2016/06/mighty.jpg

I dont want javascript cause I am using divi theme and I have no idea where to place the javascript.

I am newbie btw. Thank you soo much for you help

Tags:

2

Answers


  1. 0

    Let me answer your question.But first you need the javascript to know the height of the image. To answer the question “how many pixels will you scroll?”. But let’s assume you know the image height or you will use a same size images. In this case the key of the solution is to use parent element ‘div’ with relative position and hidden in overflow child element ‘img’ with absolute position, 0 top pixel and transition property on the top. Then add hover effect on the child in your case the image with top value “image height – parent height” . you can see the jsfiddle

    here is the HTML :

    .img-wrapper
{
    overflow: hidden;
    position: relative;
    float: left;
    height: 300px;
    width: 400px;
    border:5px solid #BBB;
    border-radius: 5px 5px 5px 5px;
}

.extrem-height-image
{
  position: absolute;
  top: 0;
  width: 400px;
  height: auto;
  transition: top 5s ease-out 0s;
}

.extrem-height-image:hover
{
   top: -300px;
}
    <div class="img-wrapper">
    <img class="extrem-height-image" src="http://placehold.it/400x600"/>
</div>

    Good luck

    Login or Signup to reply.
  2. 0

    If you want let img auto scroll, you must set a wrapper with specified width and height! It’s not necessary to set width/height for img itself

    .img-wrapper{
max-width:80px;
max-height:80px;
overflow:auto;
background:red;
}
    <div class="img-wrapper"><img src="http://placehold.it/100x100"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search