I have a div with a width of 800 and a height of 300 pixels.
I also have an .svg image that's set as the background-image of this div, and using css3 animations I make this image scroll left to right, indefinitely (it's a landscape) and wrapping.

I would like to put a circle in the middle of this div, and make the inside of this circle "zoom" the background. I'd love to have this pure CSS.

I've tried some masking and clipping, but nothing seemed to do the trick.

Is this possible with the current CSS specifications? A JavaScript solution would also be acceptable.

Here's an image showing what I mean:

If you look closely, you can see a circle in the middle, which should zoom the clouds behind it, as if looking through a magnifying glass.

I have a div with a width of 800 and a height of 300 pixels.
I also have an .svg image that's set as the background-image of this div, and using css3 animations I make this image scroll left to right, indefinitely (it's a landscape) and wrapping.

I would like to put a circle in the middle of this div, and make the inside of this circle "zoom" the background. I'd love to have this pure CSS.

I've tried some masking and clipping, but nothing seemed to do the trick.

Is this possible with the current CSS specifications? A JavaScript solution would also be acceptable.

Here's an image showing what I mean:

If you look closely, you can see a circle in the middle, which should zoom the clouds behind it, as if looking through a magnifying glass.

• javascript
• html
• css

• let me get this straight: you want the clouds to enlarge when hovering over a certain part of an image? And then you also want to do it while they are a background image? I am quite sure that's not possible with CSS or JavaScript at all. You'll need to use 2 seperate elements, and then zoom only the one containing the cloud image. – Joeytje50 Commented Feb 4, 2014 at 22:59
• @Joeytje50 sorry for not being clear. I want the "magnifying glass" to stay in one place, not moving with the mouse. It doesn't explicitly need to be a background-image, it only needs to scroll and wrap. The magnified image should act like a real-life magnifying glass; magnify a portion of the image, even if it's moving. A lot of magnifying glass examples (if not all) only feature a static image (not altered by css animations). – Jeff Huijsmans Commented Feb 4, 2014 at 23:15
• My 2 cents: jQuery panzoom by Timmy Willison is an open source script that'll magnify an image. I've also seen too many "zoom" scripts that are just displaying part of a large image with no zoom. CSS: zoom or background-size maybe? – FelipeAls Commented Feb 4, 2014 at 23:32

2 Answers 2

Trying to get it reusing the same animation, without extra elements:

CSS

.test {
   position: absolute;
   width: 600px;
   height: 400px;
   left: 0px;
   background-image: url(http://placekitten./1000/400);
   background-size: 1000px;
   -webkit-animation: base linear 20s infinite; 
   background-position-x: 0px;
   background-position-y: 50%;
}

.test:after {
    content: "";
    position: absolute;
    left: 200px;
    width: 200px;
    top: 100px;
    height: 200px;
    border-radius: 50%;
    background: inherit;
    -webkit-transform: scale(1.1);
    -webkit-animation: inherit;
    -webkit-animation-delay: -4s;
}


@-webkit-keyframes base {
     0% {     background-position-x: 0px;       }
   100% {    background-position-x: -1000px;    }
}

The trick is to set the animation in sync delaying it; just calculate the equivalence in time of the x offset.

fiddle

throw your zoom div into the pic div and give it a background image of a larger version of the same image.