How can I pin an image to a background-image (responsive)?


#1

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!!