Animating SVG image mask on hover

Question

I have an JPG with an SVG mask:

<img src="thumb.jpg" class="thumb">

.thumb {
  mask: url('mask.svg#mask');
  -webkit-mask-image: url('mask.svg');
}

So far, so good.

What I would like is for the element of the SVG to animate when the image is hovered. With a normal SVG this would be easy enough as I could target the elements with CSS. With a mask I'm not so sure. I can't target the elements directly as they are not present in the DOM.

#thumb-mask {
  &:hover {
    path {
      opacity: 0 !important;
    }
  }
}

I have tried onmouseover events inside the SVG but they don't appear be getting triggered.

<path ...
onmouseover="evt.target.setAttribute('opacity', '0.5');"
onmouseout="evt.target.setAttribute('opacity', '1')" />

Is this even possible?

Edit: If I bring the SVG inline I still can't target it when the image is hovered. Also I have multiple .thumbs, so I would need multiple SVGs if they are to animate independently (see my comment below).

javascript is disabled within `` tags and more generally whenever SVG is used in an image context to more closely match how raster images work. — Robert Longson, Nov 15 '14 at 07:19
A few options exists, answered [here](http://stackoverflow.com/questions/25002310/best-practice-for-using-svg-images) with some sample coding. — Alvin K., Nov 17 '14 at 23:49
You cannot change opacity in `` tags, only possible with ``, ` — Alvin K., Nov 18 '14 at 22:52

score 1 · Accepted Answer · answered Nov 15 '14 at 07:17

1

You can't use CSS to manipulate the contents of an external file. CSS doesn't work across document boundaries. If you inline the SVG, it should be possible though.

answered Nov 15 '14 at 07:17

Paul LeBeau

97,474
9
154
181

I'm trying to do it with a series of thumbnail type elements on an index page. If they refer to the same inline SVG then hovering over one will trigger the change of mask on all of them. I've looked into wrapping the IMG inside an inline SVG and using the SVG clippath element for the mask instead. I'm still having problems animating the clippath, especially cross browser. – Mr_Chimp Nov 18 '14 at 12:03

Animating SVG image mask on hover

1 Answers1