CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dhiraj Barnwal
Dhiraj Barnwal

Reputation: 190

Auto scroll image taller than container on hover

I want a script/css such that on hovering a image which is taller than the container it is in will auto scroll inside the container and will come back to its original position on hover out. I am really bad at javascript still I have found a code for this but it does not seem to work.

The HTML

<span class="keymel dhiraj">
<img width="300px" height="auto" src="http://dribbble.s3.amazonaws.com/users/197532/screenshots/1145931/freebie-1.png" style="top: 0px" /></span>

The CSS

.keymel {
border-radius: 5px 5px 5px 5px;
float: left;
height: 80px;
margin-left: 3px;
overflow: hidden;
position: relative;
width: 300px;
border:5px solid #DDD;}
img {
position: absolute;
transition: top 1s ease-out 0s;}

The JS

$( document ).ready(function() {
var xH
$('.dhiraj').hover(
function() {
xH = $(this).children("img").css("height");
xH = parseInt(xH);
xH = xH - 150;
xH = "-" + xH + "px";
$(this).children( "img" ).css("top",xH);
}, function() {
$(this).children( "img" ).css("top","0px");
}
);
});

I have created a small example in Jsfiddle at http://jsfiddle.net/VuTYx/1/

Please help me out.

Upvotes: 1

Views: 4817

Answers (2)

Mahmoude Elghandour
Mahmoude Elghandour

Reputation: 2931

Not Need Jquery Only By Css

see this link

Css only : 

.komal {
border-radius: 5px 5px 5px 5px;
float: left;
height: 80px;
margin-left: 3px;
overflow: hidden;
position: relative;
width: 300px;
border:5px solid #DDD;
}
img {
position: absolute;
transition: all 0.2s ease 0s;
}

 .komal:hover >img
 {  
 -moz-animation: border-bounce 3000ms linear;
 -webkit-animation: border-bounce 3000ms linear;
 }
 @-moz-keyframes border-bounce {
 0%   { margin-top: -10px;  }
 25%  { margin-top: -50px; }
 50%  { margin-top: -100px;  }
 75%  { margin-top: -50px;  }
 100% { margin-top: -0px;  }
 }
 @-webkit-keyframes border-bounce {
 0%   { margin-top: -10px;  }
 25%  { margin-top: -50px; }
 50%  { margin-top: -100px;  }
 75%  { margin-top: -50px;  }
 100% { margin-top: -0px;  }
 }

Upvotes: 2

Stuart Kershaw
Stuart Kershaw

Reputation: 17671

Your JS appears to have been working, but the code included jQuery while the Fiddle didn't have jQuery enabled. I enabled jQuery and it seems to work as you described: http://jsfiddle.net/VuTYx/2/

Make sure that jQuery is correctly included in your project by adding something like: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Upvotes: 0

Related Questions