I need your help! I have a background image and I need one part of that image to move (rotate or zoom) whenever you hover it. This image is just an example but it’s pretty similar what i have, except mine is more centered.
I want the little sticker on the bowl to move a little (rotate like 20 degrees or any sort of animation to be honest) whenever you mouse over it.
I’ve already cropped the sticker so now I have two images. I’m using the background as my div’s bg. Here’s my code:
HTML:
<header class="background-image">
<div class="sticker"></div>
</header>
CSS:
.background-image {
background-image: url(../img/bg-principal.png) !important;
background: white;
height: 90%;
background-position: center;
background-size: contain;
background-repeat: no-repeat; }
I’ve managed to place the sticker where it’s supposed to be, but it’s not responsive. When the screen is resized, the little sticker moves and I can’t seem to find a solution for that. Basically what I need is to pin the sticker to the background image, but I have no idea if that’s possible. I looked around and couldn’t find anything that worked.
Does anyone have any suggestions? Is there any way that I can do this using only CSS? I only have basic knowledge of jQuery so I’d like to avoid that but if it’s the only solution I’d be fine with that too.
Thanks!!