Interactivity with SVG clip-path featuring multiple paths through hover events

I have a unique SVG demo image with multiple circles that are clipping an animated GIF.

Can we detect hover events for each individual circle as the user mouses over them? For example, the top-left or middle-right circle?

Is it also possible to change the color overlay on those circles when hovered over?

UPDATE: I would like the hover effect to add a color overlay to the circle being hovered and make it clickable to redirect users to another page.

UPDATE 2: In addition to changing the overlay color on hover, I want text centered inside the circle.

img {
    clip-path: url(#myClip);
    width: 100%;
}
<img src="https://media.giphy.com/media/3ornk23QkOZcd32kjm/giphy.gif" alt="">

<svg width="0" height="0">
    <defs>
        <clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.00991, 0.01)">
            <path d="M 63.369194,12.267001 A 12.607063,12.267001 0 0 1 50.762131,24.534002 12.607063,12.267001 0 0 1 38.155067,12.267001 12.607063,12.267001 0 0 1 50.762131,0 12.607063,12.267001 0 0 1 63.369194,12.267001 Z" />
            <path d="M 100.85033,12.267001 A 12.607063,12.267001 0 0 1 88.243263,24.534002 12.607063,12.267001 0 0 1 75.6362,12.267001 12.607063,12.267001 0 0 1 88.243263,0 12.607063,12.267001 0 0 1 100.85033,12.267001 Z" />
            <path d="M 25.894252,12.267001 A 12.607063,12.267001 0 0 1 13.287189,24.534002 12.607063,12.267001 0 0 1 0.68012524,12.267001 12.607063,12.267001 0 0 1 13.287189,0 12.607063,12.267001 0 0 1 25.894252,12.267001 Z" />
            <path d="M 63.369194,49.877972 A 12.607063,12.267001 0 0 1 50.762131,62.144973 12.607063,12.267001 0 0 1 38.155067,49.877972 12.607063,12.267001 0 0 1 50.762131,37.61097 12.607063,12.267001 0 0 1 63.369194,49.877972 Z" />
            <path d="M 25.214127,49.877972 A 12.607063,12.267001 0 0 1 12.607063,62.144973 12.607063,12.267001 0 0 1 0,49.877972 12.607063,12.267001 0 0 1 12.607063,37.61097 12.607063,12.267001 0 0 1 25.214127,49.877972 Z" />
            <path d="M 25.214127,87.216888 A 12.607063,12.267001 0 0 1 12.607063,99.48389 12.607063,12.267001 0 0 1 0,87.216888 12.607063,12.267001 0 0 1 12.607063,74.949887 12.607063,12.267001 0 0 1 25.214127,87.216888 Z" />
        </clipPath>
    </defs>
</svg>

csshtmlsvgclip-path

Answer №1

An effective solution involves transferring the GIF into the SVG to ensure proper alignment of overlay circles with clip path openings.

svg {
  width: 100%;
}

.overlay path {
  fill: red;
  fill-opacity: 0;
}

.overlay path:hover {
  fill-opacity: 0.5;
}
<svg viewBox="0 0 500 500">
    <defs>
        <clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.00991, 0.01)">
            <path d="M 63.369194,12.267001 A 12.607063,12.267001 0 0 1 50.762131,24.534002 12.607063,12.267001 0 0 1 38.155067,12.267001 12.607063,12.267001 0 0 1 50.762131,0 12.607063,12.267001 0 0 1 63.369194,12.267001 Z" />
            <path d="M 100.85033,12.267001 A 12.607063,12.267001 0 0 1 88.243263,24.534002 12.607063,12.267001 0 0 1 75.6362,12.267001 12.607063,12.267001 0 0 1 88.243263,0 12.607063,12.267001 0 0 1 100.85033,12.267001 Z" />
            <path d="M 25.894252,12.267001 A 12.607063,12.267001 0 0 1 13.287189,24.534002 12.607063,12.267001 0 0 1 0.68012524,12.267001 12.607063,12.267001 0 0 1 13.287189,0 12.607063,12.267001 0 0 1 25.894252,12.267001 Z" />
            <path d="M 63.369194,49.877972 A 12.607063,12.267001 0 0 1 50.762131,62.144973 12.607063,12.267001 0 0 1 38.155067,49.877972 12.607063,12.267001 0 0 1 50.762131,37.61097 12.607063,12.267001 0 0 1 63.369194,49.877972 Z" />
            <path d="M 25.214127,49.877972 A 12.607063,12.267001 0 0 1 12.607063,62.144973 12.607063,12.267001 0 0 1 0,49.877972 12.607063,12.267001 0 0 1 12.607063,37.61097 12.607063,12.267001 0 0 1 25.214127,49.877972 Z" />
            <path d="M 25.214127,87.216888 A 12.607063,12.267001 0 0 1 12.607063,99.48389 12.607063,12.267001 0 0 1 0,87.216888 12.607063,12.267001 0 0 1 12.607063,74.949887 12.607063,12.267001 0 0 1 25.214127,87.216888 Z" />
        </clipPath>
    </defs>
    
  <image xlink:href="https://media.giphy.com/media/3ornk23QkOZcd32kjm/giphy.gif" width="500" height="500" clip-path="url(#myClip)"/>

  <g class="overlay" transform="scale(4.955, 5)"><!-- 500 * the scale transform values in the clipPath -->
    <a xlink:href="http://www.stackoverflow.com/">
      <path d="M 63.369194,12.267001 A 12.607063,12.267001 0 0 1 50.762131,24.534002 12.607063,12.267001 0 0 1 38.155067,12.267001 12.607063,12.267001 0 0 1 50.762131,0 12.607063,12.267001 0 0 1 63.369194,12.267001 Z" />
    </a>
    <a xlink:href="http://www.stackoverflow.com/">
      <path d="M 100.85033,12.267001 A 12.607063,12.267001 0 0 1 88.243263,24.534002 12.607063,12.267001 0 0 1 75.6362,12.267001 12.607063,12.267001 0 0 1 88.243263,0 12.607063,12.267001 0 0 1 100.85033,12.267001 Z" />
    </a>
    <a xlink:href="http://www.stackoverflow.com/">
      <path d="M 25.894252,12.267001 A 12.607063,12.267001 0 0 1 13.287189,24.534002 12.607063,12.267001 0 0 1 0.68012524,12.267001 12.607063,12.267001 0 0 1 13.287189,0 12.607063,12.267001 0 0 1 25.894252,12.267001 Z" />
    </a>
    <a xlink:href="http://www.stackoverflow.com/">
      <path d="M 63.369194,49.877972 A 12.607063,12.267001 0 0 1 50.762131,62.144973 12.607063,12.267001 0 0 1 38.155067,49.877972 12.607063,12.267001 0 0 1 50.762131,37.61097 12.607063,12.267001 0 0 1 63.369194,49.877972 Z" />
    </a>
    <a xlink:href="http://www.stackoverflow.com/">
      <path d="M 25.214127,49.877972 A 12.607063,12.267001 0 0 1 12.607063,62.144973 12.607063,12.267001 0 0 1 0,49.877972 12.607063,12.267001 0 0 1 12.607063,37.61097 12.607063,12.267001 0 0 1 25.214127,49.877972 Z" />
    </a>
    <a xlink:href="http://www.stackoverflow.com/">
      <path d="M 25.214127,87.216888 A 12.607063,12.267001 0 0 1 12.607063,99.48389 12.607063,12.267001 0 0 1 0,87.216888 12.607063,12.267001 0 0 1 12.607063,74.949887 12.607063,12.267001 0 0 1 25.214127,87.216888 Z" />
    </a>
  </g>
</svg>

Answer №2

I have redesigned this layout using different elements that can be manipulated individually.

Initially, I created 9 holes but you have the flexibility to reduce them as per your requirements by simply eliminating the background from the necessary element.

img {
    width: 100%;
    display:bloc;
}
.container {
  position:relative;
}
.container > div {
  position:absolute;
  z-index:0;
  width:calc(100%/3);
  height:calc(100%/3);
  background:
    radial-gradient(farthest-side,transparent 90%,#fff 92%),
    linear-gradient(rgba(255,0,0,0.4),rgba(255,0,0,0.4)) center/0 0 no-repeat,
    linear-gradient(rgba(0,255,0,0.4),rgba(0,255,0,0.4)) center/0 0 no-repeat;
}
.container > div:nth-child(2n):hover {
  background-size: auto auto,0 0,auto auto;
}
.container > div:nth-child(2n+1):hover {
  background-size: auto auto,auto auto,0 0;
}
.container > div:nth-child(1) {
  top:0;
  left:0;
}
.container > div:nth-child(2) {
  top:0;
  left:calc(100%/3);
}
.container > div:nth-child(3) {
  top:0;
  left:calc(2*100%/3);
}
.container > div:nth-child(4) {
  top:calc(100%/3);
  left:0;
}
.container > div:nth-child(5) {
  top:calc(100%/3);
  left:calc(100%/3);
}
.container > div:nth-child(6) {
  top:calc(100%/3);
  left:calc(2*100%/3);
}
.container > div:nth-child(7) {
  top:calc(2*100%/3);
  left:0;
}
.container > div:nth-child(8) {
  top:calc(2*100%/3);
  left:calc(100%/3);
}
.container > div:nth-child(9) {
  top:calc(2*100%/3);
  left:calc(2*100%/3);
}
<div class="container">
<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>
<img src="https://media.giphy.com/media/3ornk23QkOZcd32kjm/giphy.gif" alt="">

</div>

Answer №3

If you want to make it clickable, you'll need to enclose each path inside an 

<a href=""><path id="wave1">... </a>
tag. Then, assign an id to each path and in the CSS, use 
a svg:hover #wave1 {code to change the element on hover}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges with personalized music player

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/CSS"> #custom{ font-family: monospace; font-size: 16px; max-width: 650px; ...

javascriptcsshtmlaudio

Place a vertical slider adjacent to an HTML element on either the left or right side

I'm struggling to bind a range slider to the left or right side of a canvas that displays video. Despite my efforts, CSS seems to be putting up a strong fight. I can handle issues like stretching and slider values, but attaching it to the canvas is pr ...

javascripthtmlcsshtml5-canvasrange

Implement Infinite Scrolling Pagination in WordPress

I'm completely new to Wordpress and currently utilizing the FoundationPress theme. My goal is to include a button that users can click on to load more posts. Essentially, I want users to see four blog posts initially and then be able to load the next ...

phphtmlajaxwordpress

What is the best way to assign attributes to all items in an array, excluding the currently selected one?

I need to implement dynamic buttons in my HTML document while a JavaScript class is running and receives a response from the backend. I am using jQuery and vanilla JS, and have included an example below to demonstrate this functionality. The goal is to dis ...

javascripthtmljquerybootstrap-5

Angular's browser animation feature allows for smooth slide-up animations from the bottom

I have been experimenting with creating a simple animation, and it's working, but in the opposite direction of what I intended. I want the div to open from bottom to top and close from top to bottom. Here is my animation code in Angular: animations: ...

cssangularanimationtypescss-animations

Anchor elements and other inline elements not triggering MouseLeave event

Take a look at this CodePen link, particularly in Chrome: https://codepen.io/pkroupoderov/pen/jdRowv Sometimes, the mouseLeave event doesn't trigger when a user quickly moves the mouse over multiple images. This results in some images still having t ...

htmlcssreactjs

Modify the alignment and orientation of the data within RadHtmlChart

I have a chart: <telerik:RadHtmlChart ID="chrtInvestmentAmount" runat="server" Transitions="true" DataSourceID="SqlDataSource1" Height="256px" Skin="Glow" Width="1024px" RenderMode="Auto"> <PlotArea> <Series> ...

htmlasp.nettelerik

The functionality of CSS transitions may be affected when dynamically adding a class

Creating a custom CSS for my main div: .main { height: 0%; position: absolute; width: 100%; z-index: 100; background: whitesmoke; bottom: 0; border-radius: 15px; padding: 20px; color: gray; left: 0; right: 0; transition: height 1s e ...

cssreactjstypescriptcss-transitions

Introduction screen in a JQuery mobile application for Android devices

I'm currently working on an Android app that utilizes jQuery Mobile within my web-based application. I have multiple pages in the app and I am considering adding a splash screen to display when loading a new page or while the page is being loaded. Any ...

androidjqueryhtmljquery-uijquery-mobile

What is the best way to ensure a div takes up the rest of the height on a page when the header's size is unpredictable

Is there a way to make the red area fill the remaining visible space without overlapping into the footer? I also need the infoContent section to be scrollable. The height of the header may vary. I came across some older solutions that suggested using Java ...

csshtml

Animate owlCarousel slide motion in reverse when using the Prev and Next buttons

The default functionality of owlCarousel is to move to the right when clicking Next and to the left when clicking Prev. However, after applying animations, both directions always move in the same direction. Check out this sample on jsfiddle to see the iss ...

jqueryhtmlcssowl-carousel

Updating the hyperlink of an html element using css

I am looking to update this A tag <a href="contact.html" >Contact</a> to <a href="tel:+13174562564" >Contact</a> using only CSS, if possible. Alternatively, like this <a href="tel:+13174562564" >+13174562564</a> ...

htmlcsshref

Character count in textarea does not work properly when the page is first loaded

As English is not my first language, I apologize in advance for any grammar mistakes. I have implemented a JavaScript function to count the characters in a textarea. The code works perfectly - it displays the character limit reducing as you type. However, ...

javascripteventstextareahtml

What is the method for altering the date format of a published article?

I am looking to modify the date format of a published post in WordPress. Currently, the date format is <?php the_time('m.d.y'); ?></div>, which appears as "1.20.2018". My goal is to change it to "January 20, 2018". Can anyone guide ...

javascriptphphtmlwordpress

Unfortunately, Rem fails to honor the preferences of users on their smartphones

Trying to incorporate rem units to respect user-defined font-size: Initially, I included the following line in my CSS file: html { font-size: 62.5%; } Subsequently, I applied font-size using rem units to my element. For example: .header{ font-size: 1.5 ...

csssassfont-size

Show a div depending on user input

For those with more programming experience than myself, I have a simple question. In Rails, using coffescript, I want to show additional content based on a user's selection. Essentially, if they click on a checkbox, it should reveal an extra field for ...

jquerycssruby-on-rails-4coffeescript

When displaying text pulled from MYSQL in a div, white space is eliminated

I'm attempting to display a string that contains both spaces and line breaks. When I output the string as a value in an input field, the spaces are displayed correctly. <textarea rows={15} value={content} /> However, when I try to display ...

javascripthtmlreactjs

Styling elements with inline-block in IE8

Although there are countless questions addressing this particular issue, allow me to provide more details: The Dilemma The situation is as follows: aside { display: inline-block; } section { display: inline-block; margin-left: 2em; } Here, the eleme ...

htmlcssinternet-explorer-8

I prefer to disable the toggle feature if the target remains unchanged

My goal is to create a step-by-step ordering system using the data-id="x" attribute to determine which content should be visible when selected. I want to make sure that if two elements have the same data-id, clicking on one will deselect the other. Any su ...

javascriptjqueryhtmlcss

An alternative method for storing data in HTML that is more effective than using hidden fields

I'm trying to figure out if there's a more efficient method for storing data within HTML content. Currently, I have some values stored in my HTML file using hidden fields that are generated by code behind. HTML: <input type="hidden" id="hid1 ...

javascriptjqueryhtmlajax