Image scrolling on hover - css

Question

I want to make an image inside div to scroll down on hover. And that part is working.
Also, I need to make that it scroll longer if the image is longer and because of that I was trying to use calc inside of transition, but it is not working.
Here is my code:
.preview {
position: relative;
width: 75%;
height: 90vh;
overflow: hidden;
border: 1px solid red;
background-color: transparent;
}
.previewimg {
width: 100%;
height: 100%;
top: 0;
background-image: url(https://www.n2odesigns.com/wp-
content/uploads/Projema-Website-Preview-2016.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position-y: 0;
transition: all calc(0.02s * height) ease-in-out;
}
.previewimg:hover {
background-position-y: 100%;
height: 100%;
transition: all calc(0.02s * height) ease-in-out;
}
<div class="preview">
<div class="previewimg"></div>
</div>
If there is some other better way to do this I can use it too.

Answer 1

Ok to do this you need it to be an image only not a background image, to do this transition duration based on height functionality, please use the below code.
$('.previewimg').css("transition", "transform " + 0.02 * $('.previewimg').height() + "s ease");
.preview {
position: relative;
width: 75%;
height: 300px;
overflow: hidden;
border: 1px solid red;
background-color: transparent;
}
.preview .previewimg {
width: 100%;
height: auto;
transform: translateY(0px);
}
.preview:hover .previewimg {
transform: translateY(calc(-100% + 300px));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
<img class="previewimg" src="https://www.n2odesigns.com/wp-content/uploads/Projema-Website-Preview-2016.jpg"/>
</div>

Answer 2

If you are accepting JS as a solution then here is a code you can add without changing your HTML/CSS structure :
function getHeight(url) {
console.log(url);
var img = new Image();
img.src = url;
return 0.002*parseInt(img.height);
}
var e =$(".previewimg");
var tr = "all "+getHeight(e.css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1'))+"s ease-in-out";
console.log(tr);
e.css('transition',tr);
.preview {
position: relative;
width: 75%;
height: 90vh;
overflow: hidden;
border: 1px solid red;
background-color: transparent;
}
.previewimg {
width: 100%;
height: 100%;
top: 0;
background-image: url(https://www.n2odesigns.com/wp-content/uploads/Projema-Website-Preview-2016.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position-y: 0;
}
.previewimg:hover {
background-position-y: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
<div class="previewimg"></div>
</div>

Answer 3

You don't actually use javascript for it.
it's codepen : codepen.io or it's the css code for you code:
.preview {
width:300px;
height:300px;
overflow: hidden;
}
.previewimg{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://source.unsplash.com/500x1500/);
transition: background-position 2s ease-out;
}
.preview:hover .previewimg{
background-position: 0 100%;
}

Answer 4

you can add other body elements with the styles classes name. And it make a boxes that when we hover the logo is changed. The logo is changes on hover.
*{
box-sizing: border-box;
}
.logoses{
text-align: center;
list-style: none;
}
.logoses .logo{
width: 178px;
height: 75px;
background:
url('G:/touqeer/amp-landing-pages/assets/images/clients_logo.png') center top no-repeat;
margin: 0 2px 8px;
border: 1px solid #e0e0e0;
display: inline-block;
vertical-align: middle;
transition: all .4s ease-in;
}
#amara{
background-position: 5px -125px;
}
#amara:hover{
background-position: 5px 0px;
}
#ge{
background-position: -1486px -125px;
}
#ge:hover{
background-position: -1486px -2px;
}
#nuance{
background-position: -489px -124px;
}
#nuance:hover{
background-position: -489px -1px;
}
#gilson{
background-position: -329px -123px;
}
#gilson:hover{
background-position: -329px 0px;
}
#pcs_wireless{
background-position: -824px -125px;
}
#pcs_wireless:hover{
background-position: -824px -2px;
}
#herbalife{
background-position: -161px -123px;
}
#herbalife:hover{
background-position:-161px 0px;
}
#pcf{
background-position: -659px -125px;
}
#pcf:hover{
background-position: -659px -2px;
}
#seimens{
background-position: -991px -125px;
}
#seimens:hover{
background-position:-991px -2px;
}
#melesta_games{
background-position: -1156px -124px;
}
#melesta_games:hover{
background-position: -1156px 1px;
}
#samsung{
background-position: -1324px -123px;
}
#samsung:hover{
background-position: -1324px 0px;
}
.center_pd{
padding: 75px 0px;
}
.text_bottom{
margin: 0px 0px 60px 0px;
}
.center_text{
text-align: center;
}
.header{
margin: 0px 0px 20px 0px;
}
h2{
font-size: 30px ;
font-weight: 400;
color: #393939;
}
.prg{
font-size: 16px;
color: #333;
font-family: Open Sans;
}