Change size of SVG clipping mask on mouseover - html

Question

I want to show images using a mask. I tried the css clip-path but because the browser support is that poor I want to use an svg for clipping. My question is how can i change the size of the mask on mousover?
Like here:
I am using this code at the moment:
<svg>
<defs>
<!--defines the shape to use for clipping-->
<circle id="circle" cx="100" cy="100" r="100" />
</defs>
<clipPath id="clip">
<!--creates the clipping mask from the shape-->
<use xlink:href="#circle" overflow="visible"></use>
</clipPath>
<!--group containing the image with clipping applied-->
<g clip-path="url(#clip)">
<image overflow="visible" xlink:href="model_detail.jpg"></image>
</g>
</svg

Answer 1

In your case, since you need to resize both the circle and the clipped image, you may scale the svg element on hover like so:
svg {
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: scale(1);
transition: transform 0.5s;
}
svg:hover {
transform: scale(1.5);
}
<svg viewBox="0 0 200 200" width="200">
<defs>
<!--defines the shape to use for clipping-->
<circle id="circle" cx="100" cy="100" r="100" />
</defs>
<clipPath id="clip">
<!--creates the clipping mask from the shape-->
<use xlink:href="#circle" overflow="visible"></use>
</clipPath>
<!--group containing the image with clipping applied-->
<g clip-path="url(#clip)">
<image overflow="visible" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg"></image>
</g>
</svg>
Please observe that I've added a viewBox and a width attribute to the svg. If you don't declare the viewBox and the width the svg element will have a size of 300px/150px and the part of the circle that falls outside the svg canvas will be cuted off.
UPDATE
The OP is commenting
I don't want to scale the image, just the mask. Is that possible?
This is how I would do it: In the next example I'm using transitions to scale the circle when you mouse over the svg element:
#c{transform: scale(1);
transition: transform 0.5s;}
svg:hover #c {
transform: scale(1.5);
}
Next comes a working example:
svg {
border: 1px solid;
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#c{transform: scale(1);
transition: transform 0.5s;}
svg:hover #c {
transform: scale(1.5);
}
<svg viewBox="-150 -150 300 300" width="200">
<defs>
<clipPath id="clip">
<!--creates the clipping mask from the shape-->
<circle id="c" r="100" />
</clipPath>
</defs>
<!--group containing the image with clipping applied-->
<image clip-path="url(#clip)" id="img" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" x="-150" y="-150" width="300" height="300"></image>
</svg>

Answer 2

You could do it easily with JavaScript, adding an eventlistener onMouseOver over a class.
However, if you need CSS, you can an animation that will do it,like this.
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s; /* Animation */
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</style>
<div class="zoom"></div>