SVG image changes to a different SVG image during hover (not filter)-CodePudding

I have an SVG image in HTML, created in Figma, which you can find below.

Now when a mouse is hovered to it, I want the SVG image to change into a completely different SVG image. The hovered image has the following SVG code below:

I want to ask help how do I do this in CSS? I know there is a CSS hover property of background: url("images/card-back.jpg")

But then, I do not want to keep the hovering, foreground image. Is there a way to do this that doesn't use complicated JS? Or a way to do it in CSS?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>

<svg width="179" height="196" viewBox="0 0 179 196" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_260_257)">
<rect x="7" y="7.29297" width="157" height="173" rx="16" fill="white"/>
<rect x="8.5" y="8.79297" width="154" height="170" rx="14.5" stroke="#DAFDF5" stroke-width="3"/>
</g>
<path d="M7 20.8834C7 20.8834 7.5 17.0996 10 13.793C13 9.82503 16.4741 8.79297 16.4741 8.79297V178.977C16.4741 178.977 13.5 178.293 10.5 174.293C7.5 170.293 7 167.024 7 167.024V20.8834Z" fill="#04ACA7"/>
<defs>
<filter id="filter0_d_260_257" x="0" y="0.292969" width="179" height="195" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="4" dy="4"/>
<feGaussianBlur stdDeviation="5.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.854902 0 0 0 0 0.992157 0 0 0 0 0.960784 0 0 0 0.9 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_260_257"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_260_257" result="shape"/>
</filter>
</defs>
</svg>

<script src="logic.js"></script>

  </body>
</html>

<-----------SVG code of the image appearing when hovered---------->

<svg width="102" height="88" viewBox="0 0 102 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.0806 39.4139L51.082 74.4153L86.0834 39.4139C89.1779 36.3194 90.9164 32.1223 90.9164 27.7459C90.9164 23.3695 89.1779 19.1724 86.0834 16.0779C84.5511 14.5456 82.732 13.3301 80.73 12.5009C78.728 11.6716 76.5823 11.2448 74.4153 11.2448C70.039 11.2448 65.8419 12.9833 62.7473 16.0779L51.082 27.7431L39.4167 16.0834C36.3143 13.0303 32.1311 11.3269 27.7784 11.3441C23.4258 11.3613 19.2562 13.0978 16.178 16.1752C13.0998 19.2527 11.3624 23.4219 11.3441 27.7745C11.3259 32.1272 13.0283 36.3108 16.0806 39.4139ZM47.1936 8.2955L51.082 12.1839L54.9704 8.2955C57.5199 5.72358 60.5523 3.68056 63.8935 2.28372C67.2347 0.886878 70.8189 0.163735 74.4403 0.155805C78.0617 0.147875 81.649 0.855314 84.9963 2.23751C88.3435 3.6197 91.3848 5.64943 93.9456 8.21016C96.5063 10.7709 98.536 13.8122 99.9182 17.1595C101.3 20.5067 102.008 24.094 102 27.7155C101.992 31.3369 101.269 34.921 99.872 38.2622C98.4752 41.6034 96.4322 44.6358 93.8602 47.1853L54.9759 86.0751C54.4651 86.5864 53.8586 86.9921 53.1909 87.2689C52.5232 87.5457 51.8075 87.6881 51.0848 87.6881C50.362 87.6881 49.6463 87.5457 48.9786 87.2689C48.3109 86.9921 47.7044 86.5864 47.1936 86.0751L8.30379 47.1908C5.69689 44.6495 3.62055 41.6159 2.1952 38.2659C0.769861 34.9159 0.0238901 31.3162 0.000564486 27.6757C-0.0227611 24.0352 0.677023 20.4262 2.05932 17.0582C3.44162 13.6903 5.47892 10.6303 8.05304 8.05579C10.6272 5.48131 13.6869 3.44358 17.0546 2.0608C20.4224 0.678024 24.0313 -0.0222708 27.6718 0.000539839C31.3123 0.0233505 34.9121 0.768812 38.2623 2.19368C41.6125 3.61855 44.6464 5.69446 47.1881 8.301L47.1936 8.2955Z" fill="#B3B3B3"/>
</svg>

CodePudding user response：

Try this:

<div style='position: absolute; top: /*vertical position of SVGs*/; left: /*horizontal position of SVGs*/; width: /*width of SVGs*/; height: /*height of SVGs*/;' onmouseover="document.getElementById('svg1').style.display = 'none'; document.getElementById('svg2').style.display = '';" onmouseout="document.getElementById('svg1').style.display = ''; document.getElementById('svg2').style.display = 'none';"></div>
<svg id="svg1"></svg>
<svg id="svg2" style="display: none;"></svg>

If implemented right, it should do the trick. If it doesn't work, try sending me your setup (setup reader link: data:text/html,<script>document.write(JSON.stringify(window.navigator));</script>) and I'll see what fixes can be made.

CodePudding user response：

What We Need to Fix

Essentially, you need hide the image and show what you want with the background-image attribute. You'll just use a standard :hover selector, which sets the image to hidden (using opacities), and refreshes with a background image of your SVG. You'll need to encode your SVG, I use this little tool: URL Decoder—Convert garbled address. (Source: MDN Web Docs: fill-opacity and MDN Web Docs: stroke-opacity.) Here is the CSS...

TLDR, 100% CSS-Only Fix

#hover-box:hover {
    fill-opacity: 0;
    stroke-opacity: 0;
    background-repeat: no-repeat;
    background-image: url("data:image/svg xml, ***encoded SVG***");
}

Working SO Demo

And here it is working with your code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <STYLE>



#hover-box:hover {
fill-opacity: 0;
stroke-opacity: 0;
background-repeat: no-repeat;
background-image: url("data:image/svg xml,    ");
}
</STYLE>
  </head>
  <body>

<svg id="hover-box" width="179" height="196" viewBox="0 0 179 196" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_260_257)">
<rect x="7" y="7.29297" width="157" height="173" rx="16" fill="white"/>
<rect x="8.5" y="8.79297" width="154" height="170" rx="14.5" stroke="#DAFDF5" stroke-width="3"/>
</g>
<path d="M7 20.8834C7 20.8834 7.5 17.0996 10 13.793C13 9.82503 16.4741 8.79297 16.4741 8.79297V178.977C16.4741 178.977 13.5 178.293 10.5 174.293C7.5 170.293 7 167.024 7 167.024V20.8834Z" fill="#04ACA7"/>
<defs>
<filter id="filter0_d_260_257" x="0" y="0.292969" width="179" height="195" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="4" dy="4"/>
<feGaussianBlur stdDeviation="5.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.854902 0 0 0 0 0.992157 0 0 0 0 0.960784 0 0 0 0.9 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_260_257"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_260_257" result="shape"/>
</filter>
</defs>
</svg>

<script src="logic.js"></script>

  </body>
</html>