I'm wondering how to display the filled version of a bootstrap icon when I hover over it.
I have this code:
<svg
width="80px"
height="80px"
viewBox="0 0 16 16"
class="bi bi-cloud-plus"
fill="#5cb85c"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"
/>
<path
fill-rule="evenodd"
d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z"
/>
</svg>
(cloud plus icon) and I'm wondering how to merge it to it's filled partner (cloud plus fill icon). How?
Generally the way this is accomplished is to:
:hover
of the parent, swap the CSS to hide the non-filled version and show the filled version.See below:
To do a transition between them is possible but a bit more difficult, in that it requires some positioning tricks. We have to make the parent
position: relative;
so that the children can beposition: absolute
to sit on top of each other. Then, instead of leveragingdisplay
we leverageopacity
for showing/hiding, and put atransition
for theopacity
property:One last thing-- these SVG are not particularly accessible by themselves. Consider leveraging Bootstrap screen reader utilities to add some accessible text for users who may not be looking at your site to navigate it.