具有更多悬停效果的独特图像

Question

I wanted to ask if it was possible, using only one image, to have more hover effects? For example, a single image divided into columns and each column has its own effect, as if the image were divided into transparent areas.

Thank you, Carlo

Answer 1

I found a solution for my problem.

 .x { opacity:0; cursor: pointer;} .x:hover { opacity:1; }

 <svg width="600" height="600" viewBox="0 0 600 600"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="8"/> </filter> <image href="https://i.imgur.com/Lky5aRQ.jpg" width="600" height="600" id="img"/> <clipPath id="c1"> <path d="M0 0h100v600h-100z"/> </clipPath> <clipPath id="c2"> <path d="M100 0h100v600h-100z"/> </clipPath> <clipPath id="c3"> <path d="M200 0h100v600h-100z"/> </clipPath> <clipPath id="c4"> <path d="M300 0h100v600h-100z"/> </clipPath> <clipPath id="c5"> <path d="M400 0h100v600h-100z"/> </clipPath> <clipPath id="c6"> <path d="M500 0h100v600h-100z"/> </clipPath> </defs> <use xlink:href="#img"/> <use xlink:href="#img" filter="url(#blur)" clip-path="url(#c1)" class="x"/> <use xlink:href="#img" filter="url(#blur)" clip-path="url(#c2)" class="x"/> <use xlink:href="#img" filter="url(#blur)" clip-path="url(#c3)" class="x"/> <use xlink:href="#img" filter="url(#blur)" clip-path="url(#c4)" class="x"/> <use xlink:href="#img" filter="url(#blur)" clip-path="url(#c5)" class="x"/> <use xlink:href="#img" filter="url(#blur)" clip-path="url(#c6)" class="x"/> </svg>

Thank you