Мне бы хотелось, чтобы изображение почти «плавало» над контейнером, как показано на прилагаемом рисунке.
Как бы я хотел, чтобы оно выглядело
Когдамышь наводит курсор на контейнер изображения. Я хочу, чтобы изображение имитировало направление мыши, а контейнер должен немного вибрировать.
Я хотел бы использовать 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