CODEWITHSUNDEEP
javascriptjquerycss
Keviin Cosmos
Keviin Cosmos

Reputation: 187

Scroll absolute image inside relative tag on hover

I have some layouts I want to show, and the featured can be very long. I wanted the image to scroll towards the top on hover, so it's possible to see the layout before you go into the site.

Right now my transition is set to 2sec, which also means that if one layout is longer than the other, it will scroll faster, which is confusing I think.

It's CSS only, and if it's not possible, I don't mind some jquery. Also, the images are only scrolling 100% the height of the A tag, not the whole image height

Here's my example:

I can change the HTML markup if there's a better way to do it.

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
}

.container .item {
  width: calc(50% - 20px);
  background: lightblue;
}
.item a:first-child {
    position: relative;
    overflow: hidden;
    display: block;
    height: 400px;    
}
.item a:first-child img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all ease 2s;
}
.item:hover a:first-child img {
   top: -100%;
}

.item a:last-child {
  display: block;
  padding: 15px;
  text-align: center;
  color: #fff;
  font-weight: 700;
}
<div class="container">
  <div class="item">
    <a href="#layout-url">
      <img src="http://www.templatewire.com/img/templates/helios-l.jpg">
    </a>
    <a href="#layout-url">Layout title</a>
   </div>
   <div class="item">
    <a href="#layout-url">
      <img src="http://www.templatewire.com/img/templates/helios-l.jpg">
    </a>
    <a href="#layout-url">Layout title</a>
</div>

Upvotes: 1

Views: 225

Answers (1)

Matthew Blewitt
Matthew Blewitt

Reputation: 487

I think jQuery is your best bet as you need to work some maths around the animation and 'top' value of each image depending on the height.

Here's a codepen https://codepen.io/matthewblewitt/pen/dKJjyd

The images 'top' and animation speed is calculated by its ratio to the item height.

ps I've set one of the images to a much larger height just to show how it scrolls with different image sizes.

$('.item img').each(function(){
    var itemHeight = $('.item a:first-child ').outerHeight();
    var imgHeight = $(this).outerHeight();         
    // Work out what percentage the image is of the item and remove 100% from that
    var topHeight = (imgHeight/itemHeight)*100-100;
    //Make the animation speed proportional to that image/ item ratio
    var animationSpeed = (imgHeight/itemHeight)/2; //Change '2' to tweak the speed

    $(this).mouseleave(function(){
        $(this).css({
            top: '0'  
        });
    })
    
    // The 'top' property  of the image needs 
    // to be set as as a percentage of the parent
    $(this).mouseenter(function(e) { 
        $(this).css({
            top: '-'+topHeight+'%',
            transition: 'all ease '+animationSpeed+'s'
        });
    })
});
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
}

.container .item {
  width: calc(50% - 20px);
  background: lightblue;
}
.item a:first-child {
    position: relative;
    overflow: hidden;
    display: block;
    height: 500px;    
}
.item a:first-child img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all ease 2s;
}
.item:hover a:first-child img {
   top: -100%;
}
.item a:last-child {
  display: block;
  padding: 15px;
  text-align: center;
  color: #fff;
  font-weight: 700;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="item">
      <a href="#layout-url">
        <img height="2500" src="http://www.templatewire.com/img/templates/helios-l.jpg">
      </a>
      <a href="#layout-url">Layout title</a>
     </div>
     <div class="item">
      <a href="#layout-url">
        <img src="http://www.templatewire.com/img/templates/helios-l.jpg">
      </a>
      <a href="#layout-url">Layout title</a>
  </div>

Upvotes: 1

Related Questions