Switch from monochrome to color when hovering inside a clipping mask

I have successfully mastered the technique of changing an image from grey to color on hover using CSS and JavaScript. However, I am curious about whether it is possible to achieve the same effect using a clipping mask.

Attached is an image that illustrates exactly what I am attempting to accomplish. Most examples I have come across either change the entire image or only a specific area around the mouse pointer. My goal is to have a designated section or clipped region of an image transform in color upon hovering over it.

View the group shot displaying the highlighted colored area

csshovermaskclipping

Answer №1

To achieve this, consider utilizing SVG filters in conjunction with CSS.

  • Create a shape using a vector tool and then convert it to base64
  • Apply a filter using <feColorMatrix> on the image. This filter could be blur, grayscale, etc (for more details on SVG filters)
  • Ensure the correct dimensions are set to apply the shaped filter over the background image.

An example is provided below:

svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

image {
  filter: grayscale(1);
}
image:hover {
  filter: url(#blurlayer2);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
          <filter id="blurlayer2" width="120%" height="100%">
            <feColorMatrix
    type="matrix"
   values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' />
            <feGaussianBlur  stdDeviation="0" result="blur"/>
            <feImage id="feimage" xlink:href="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIzMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm...Encoded Base64 Image Data...

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

PHP: the images uploaded are not located within the designated folder

Having trouble uploading multiple images to a folder and saving them in the database? The images are not moving to the folder, even though the code works on localhost. Here is the code snippet: var abc = 0; // Declaring and defining global incremen ...

javascriptphphtmlcss

Efficient Django Template: Accurate Conversion of Values through Dictionary Searching

I have an object with an attribute that has specific choices defined in its class: class StashURLJobRequest(models.Model): STATUS_CHOICES = ((0,"Requested"),(1,"Done"),(2,"Failed")) url = models.URLField() created = models.DateTimeField(auto_n ...

pythoncssdjango

What is the best way to transfer a table with multiple rows in a single column to an Excel spreadsheet while maintaining the headers on a horizontal plane

Currently, I am in the process of gathering data. The data is being sent to me in a word format and organized in a vertical columned table with different headers and alternating data. I am looking for a way to export this data from Word into an Excel spre ...

htmlcssexcelvbams-word

Assistance required for locating elements in Selenium using Css Selector

Hi there, I'm not really a developer. I've got two checkboxes in my table without any IDs. Usually, I can easily work with Selenium when elements have IDs, but in this case, the table was generated using jquery datatables and no automatic ID ass ...

c#cssgoogle-chromeseleniumselenium-webdriver

Shift the content downwards within an 'a' snippet located in the sidebar when it reaches the edge of the right border

I'm having an issue with my style.css file. As a beginner in programming, I am trying to position text next to an image attached in the sidebar. However, the text is overflowing past the border. Here's the HTML code: Please see this first to ide ...

javascripthtmlcssbootstrap-4

Show only a cropped section of a resized image within a div

I have a script that calculates the best region of an image to display within a specific div size. This calculation is done in PHP and generates a JSON output like this: {"scale":1.34,"x1":502,"x2":822,"y1":178,"y2":578} The image in question has dimensi ...

javascriptjqueryhtmlcss

Displaying various charts in a single view without the need for scrolling in HTML

How can I display the first chart larger and all subsequent charts together in one window without requiring scrolling? This will eventually be viewed on a larger screen where everything will fit perfectly. Any recommendations on how to achieve this? Here ...

javascripthtmlcssangularjsplotly

Delving into the concept of the last-child element

Looking for assistance with selecting the final EC_MyICHP_Item from an HTML structure: <div class="decorator"> <div class="EC_MyICHP_Item"> <div class="text"> <h3><a target="_blank" title="" href="#">& ...

cssjquery-selectorscss-selectors

A collection of jQuery objects that consist of various DOM elements as their properties

Seeking a more concise and potentially more streamlined approach using jQuery. I have an object called lbl which represents a div. Inside this div, there is a span tag that contains the properties firstName and lastName of the lbl object. Here's how t ...

javascriptjquerycssdom

What could be the reason for the absence of this Javascript function in my attribute?

I have been working on an app using electron, and I have a function that successfully adds tabs to the app. The issue arises when I try to add tabs via JavaScript with the onclick attribute - they show up as expected but do not execute the code to hide and ...

javascripthtmlcssfunctionelectron

Is there a way to display the form values on the table once it has been submitted?

I'm struggling with my form input not showing up under the table headings after submission. I've reviewed the code multiple times, but can't figure out what's causing the issue. If you have any suggestions on how to write the code more ...

javascripthtmljquerycss

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

My aim is to increase the size of form fields when the cursor focuses on them, either through a mouse click or by tabbing using the keyboard. By utilizing document.activeElement focus, I can identify when the user clicks inside a text input or selects an ...

javascripthtmljquerycss

The individual blog pages on my site are not receiving the static files they need to display

I'm facing an issue serving a css file to individual blog posts on my website's blog section. Here's how it's supposed to work: Visit /blog- you'll see the main blog page, which is functioning fine. However, when trying to access ...

cssnode.jsexpresspug

Having trouble dividing an HTML file?

Currently, I am working on creating a very basic web page that is divided into two parts. Each part will have its own HTML file: Welcome.html & Welcome.css: <html> <head> <link rel="stylesheet" type="text/css" href="Welcom ...

javascripthtmlcssnode.js

Tips for evenly spacing items in a navigation bar

I'm having trouble centering the logo on the navbar as it always leans more towards the left. Is there a way to resolve this problem using Bootstrap classes? The navbar consists of a dropdown toggle button on the left, the logo in the center, and two ...

htmlcssbootstrap-4

Switch between different table rows

I have here a table that is used for displaying menu and submenu items. It's a mix of PHP (to fetch the menu items and their respective submenus) and HTML. What I am trying to figure out is how to toggle the visibility of only the submenu items under ...

javascriptphpjqueryhtmlcss

Choose a specific div element from a collection of dynamically generated divs in Angular

I have been working on a code to dynamically generate div elements using the *ngFor directive. Here is what I have so far: <div *ngFor = "let item of Items"> <p>Item : {{item}} </p> </div> The challenge I encountered is that w ...

htmlcssangulartypescriptcss-selectors

How can I make a clickable button or link within an anchor tag that is still able to be right-clicked?

Hey there, I'm currently working on a notification dropdown menu where each <li> contains a link or an <a> tag. I'm aiming to create something similar to Facebook's notification system. However, the challenge lies in trying to ...

javascriptcsstwitter-bootstrap-3drop-down-menuanchor

Unique ways to serialize an HTML element efficiently: JavaScript tricks

Is there a way to store a reference of an HTML tag for future use? For instance, if I click on a div and save a pointer to that div in JavaScript, is it possible to serialize this pointer and then de-serialize it to use in another part of the web applicat ...

javascripthtmlcssdomserialization

The final position of the Angular increment animation does not hold

Is there a way to trigger an animation when the value of countAllOrders changes? Specifically, I am attempting to adjust the margin of a list using keyframes in an Angular animation. Here is my HTML code: <ul class="digits" [@ordersValue]=&q ...

cssangularangular-animations