Exploring new concepts, I have delved into the fascinating world of SVG objects. I recently designed a button with a filter applied to it. However, the designer I am collaborating with has requested a hover effect where the filter (a drop shadow) transitions from opacity 1 to 0 on hover, and then back to 1 when not hovered over.
Although I attempted to implement a smooth transition using traditional methods, the result fell short of expectations.
Below is the code I am working with:
HTML
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" style="enable-background:new 0 0 216 216;" xml:space="preserve">
<filter id="fade" height="150%" width='150%'>
<feMerge>
<feMergeNode/>
<!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic" />
<!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
<filter id="dropshadow" height="150%" width='150%'>
<feGaussianBlur in="SourceAlpha" stdDeviation="25" />
<!-- stdDeviation is how much to blur -->
<feOffset dx="0" dy="15vh" result="offsetblur" />
<!-- how much to offset -->
<feComponentTransfer>
<feFuncA type="linear" slope="0.4" />
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic" />
<!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
<a href='' id='playvideo_button'>
<g>
<path class="st0" d="M108,24c-46.4,0-84,37.6-84,84s37.6,84,84,84s84-37.6,84-84S154.4,24,108,24z" />
<polygon class="st1" points="92,140 92,76 140,108" />
</g>
</a>
</svg>
CSS
svg {
width: 30vw;
height: 30vh;
cursor: pointer;
}
svg .st0 {
fill: #4982CF;
transition: filter.6s ease-out;
filter: url(#dropshadow);
}
svg .st1 {
fill: #ffffff;
}
svg:hover .st0{
filter: url(#fade);
}
For further experimentation, here is a Fiddle that I have been working with.
Edits
To address the issue, I attempted creating a second filter involving a transparent overlay. Unfortunately, this also resulted in a less than ideal transition effect. Undoubtedly, I find myself uncertain about the next steps to take in resolving this challenge.