JSFiddle - React, Tailwind, and code Playground

by talla13

HTML

<!--Чтобы картинка по наведению меняла положение и оставалась там до клика на нее-->

<div id="axis" class='one'>
        <img class="object van move-up" src="http://www.cyberforum.ru/images/ani.jpg" alt="" />

<!--подключить библиотеку <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
    <html>
    <head>
        <TITLE> gallery </TITLE>
        <meta charset = "utf-8">
        <link rel="stylesheet" type="text/css" href="Styles/Style.css">
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        
        <script type="text/javascript">
            $(document).ready(function (){ // ждем загрузку страницы
                $('#block').mouseenter( function () {  /*(#див или класс с которого ловим событие).наведение мыши(функция*/
                    $('.animate').stop().animate({top: -3100}, 1000); /*(.класс над которым проводим действие).стоп текущая анимация.анимация({ксс свойства, у нас позиция элемента 'top' : 'значение куда двигать/до какого момента'}, время анимации );*/ 
                });
             
                $('#block').click( function () { /*все тоже самое только ловим клик по блоку*/
                    $('.animate').stop().animate({top: 0}, 500); /* и анимируем в изначальное положение (0) ну или какое там у тебя*/
                });
            });
        </script>
 
 
 
    </head>
 
    <body>
        <div id="block">Block</div>
        <img src="http://live4fun.ru/pictures/img_12507686_99_6.jpg" class="animate">
        
 
    </body>
</html>

CSS

/*при применении css картинка при наведении смещается, но тут же возвращается, чтобы оставалась на новом месте, надо использовать js*/

#axis:hover .move-up{
    transform: translate(0,100px);
    -webkit-transform: translate(0,100px);
}
.object1{
    transition: all 3s linear;
    position: absolute;
     -webkit-transition: all 3s linear;
}

body {
    background: #f90;
}
 
#block{
    width: 500px;
    height: 100px;
    margin: 0 auto;
    background: #ccc;
    font: 14px 'Segoe UI';
    line-height: 100px;
    
}
 
.animate{
    position: relative;
}

JavaScript

$(document).ready(function() { // вся мaгия пoсле зaгрузки стрaницы''
    $('#Axis').mouseenter( function () {  /*(#див или класс с которого ловим событие).наведение мыши(функция*/
        $('.move-up').stop().animate({top: -3100}, 500); /*(.класс над которым проводим действие).стоп текущая анимация.анимация({ксс свойства, у нас позиция элемента 'top' : 'значение куда двигать/до какого момента'}, время анимации );*/ 
    });
 
    $('#Axis').click( function () { /*все тоже самое только ловим клик по блоку*/
        $('.move-up').stop().animate({top: 0}, 500); /* и анимируем в изначальное положение (0) ну или какое там у тебя*/
    });
 
});