Как выровнять изображение контейнера и сделать так, чтобы изображение и контейнер реагировали при наведении - PullRequest
0 голосов
/ 10 октября 2019

Мне бы хотелось, чтобы изображение почти «плавало» над контейнером, как показано на прилагаемом рисунке.

Как бы я хотел, чтобы оно выглядело

Когдамышь наводит курсор на контейнер изображения. Я хочу, чтобы изображение имитировало направление мыши, а контейнер должен немного вибрировать.

Я хотел бы использовать jQuery для

$(document).hover(function).

Это код, который я пытался использовать, но в итоге он не работал.

<section class="page3">
        <div class="page_container">
            <div class="row">

            <div class="Thumb_container">
                <div class="card-panel teal accent-1" style="margin-left: 20%;margin-right: 20%">

                    <div class="column3">
                    <div class="w3-display-topleft w3-container"><img src="Question-3 Assets/ThumbsUp.png" style="width: 40%;height: 40%;padding: 10px;margin-right:20%" /></div>
                    </div>
                    <div class="column4">
                    <p1 style="margin-left: 30%;">Things didn't want to move</p1>
                        </div> 



                    <!-- JavaScript and jQuery to move image according to cursor -->

                <script>
                    var Thumb_imgCenter=[thumb_img.offset().left+thumb_img.width()/2, thumb_img.offset().top+thumb_img.height()/2];

                    $(thumb_img).hover(function()){

                            var angle = Math.atan2(e.pageX- boxCenter[0],-(e.pageY- Thumb_imgCenter[1])*(180/Math.PI); 

                                thumb_img.css({'-moz-transform': 'rotate(' + angle + 'deg'});
                                thumb_img.css({'transform': 'rotate(' + angle + 'deg'});
                                          )};
                </script>

Я - полный и полный Noob с CSS, поэтому любая помощь будет оценена.

Я не знаю, было бы лучше, если бы я переместил некоторый код к style.ccs. Опять же я не уверен, потому что я только начал с HTMl

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...