CODEWITHSUNDEEP
csssvgdropshadowonhover
Andrew Foulds
Andrew Foulds

Reputation: 135

SVG CSS drop shadow on hover hiding

What I need is for the SVG to disappear but the drop shadow to remain on hover. What I'm getting is both the SVG and the drop shadow disappearing.

div > svg {
  color: black;
  filter: drop-shadow(0px 0px 6px red);
}

div:hover > svg {
  color: transparent;
}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <g id="ico">
    <path fill="currentColor"
      d="M20.3..." />
  </g>
</svg>

<div>
  <svg style="background-color: transparent;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="button">
    <title>A title here</title>
    <use href="#ico"></use>
  </svg>
</div>

How can I change my CSS to get what I need?

Upvotes: 0

Views: 75

Answers (2)

Michael Mullany
Michael Mullany

Reputation: 31810

The problem is that the drop-shadow CSS filter uses the alpha channel of the input under the covers and relies on that being non-zero. When you set its opacity to 0 - the drop-shadow disappears.

So you have to customize the SVG filter that is doing the work under the covers. This turns out to be slightly tricky. You have to set the opacity of the hover color to almost zero - but non zero, and then use the filter to dial it back to normal (the 100 in that color matrix), so that you still have an opaque shape to feed into the dropshadow part of the filter.

div > svg {
  color: black;
  filter: url(#drop-shadow-using-luminance);
}

div:hover > svg {
  color: rgba(0,0,0,0.01);
}
<div>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512" height="5em" width="5em" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="drop-shadow-using-luminance" x="-200%" y="-200%" width="500%" height="500%">

    <feColorMatrix  type="matrix" values="0 0 0 0 0 
                                          0 0 0 0 0 
                                          0 0 0 0 0 
                                          0 0 0 100 0"/>
    <feGaussianBlur stdDeviation="6" result="alphaBlur"/>
    <feFlood flood-color="red"/>
    <feComposite in2="alphaBlur" operator="in"/>
    <feMerge>
     <feMergeNode/>
     <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>
  </defs>
  
  <path d="M0 192H176V0H160C71.6 0 0 71.6 0 160v32zm0 32V352c0 88.4 71.6 160 160 160h64c88.4 0 160-71.6 160-160V224H192 0zm384-32V160C384 71.6 312.4 0 224 0H208V192H384z"></path>  
  </svg>
 </div>

Upvotes: 1

Yuvaraj M
Yuvaraj M

Reputation: 4616

You can try color:white instead of transparent

div > svg {
  color: black;
  filter: drop-shadow(0px 0px 6px red);
}

div:hover > svg {
  color: white;
}
<div>
     <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512" height="5em" width="5em" xmlns="http://www.w3.org/2000/svg"><path d="M0 192H176V0H160C71.6 0 0 71.6 0 160v32zm0 32V352c0 88.4 71.6 160 160 160h64c88.4 0 160-71.6 160-160V224H192 0zm384-32V160C384 71.6 312.4 0 224 0H208V192H384z"></path>          </svg>
 </div>

Upvotes: 0

Related Questions