Image scroll on hover

CODE CSS:

.wtr-scroll_hover {

 --height_wtr_img: 300px;

}

.wtr-scroll_hover {

 height: var(--height_wtr_img)!important;

 overflow: hidden;

}

.wtr-scroll_hover .brz-img {

 -webkit-transform: translateY(0px);

   -ms-transform: translateY(0px);

     transform: translateY(0px);

 -webkit-transition: -webkit-transform 10s ease!important;

 transition: -webkit-transform 10s ease!important;

 -o-transition: transform 10s ease!important;

 transition: transform 10s ease!important;

 transition: transform 10s ease, -webkit-transform 10s ease!important;

}

.wtr-scroll_hover:hover .brz-img {

 -webkit-transform: translateY(calc(var(--height_wtr_img) - 100%));

   -ms-transform: translateY(calc(var(--height_wtr_img) - 100%));

     transform: translateY(calc(var(--height_wtr_img) - 100%));

}