I have a container div that is 150x150 in size and contains an image that is 150x180 in size. The div has the CSS property overflow: hidden enabled, so part of the image is not visible. While the div size is fixed at 150x150, the height of the image may vary from one image to another. When hovering over the div or the image, I want to vertically move the image so that the hidden portion becomes visible to the viewer.
To achieve this functionality, I have used jQuery. Below are the snippets of my CSS, HTML, and jQuery code:
$("#container").mouseenter(function() {
img_height = $(this).find('img').height();
$(this).find('img').animate({
'top': 150 - img_height
}, 300);
});
$("#container").mouseleave(function() {
$(this).find('img').animate({
'top': 0
}, 300);
});#container {
width: 150px;
height: 150px;
overflow: hidden;
border: 1px solid;
position: relative;
}
#container img {
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<img class="fl" src="http://media.dcentertainment.com/sites/default/files/superman-150x180.jpg" width="150"/>
</div>Is it possible to achieve the same functionality using CSS transitions? If yes, how can it be done?