Show only the portion of the image where the cursor is currently hovering

Question

Show only the portion of the image where the cursor is currently hovering

Information in advance:
You can check out the current code or view the live demo (hover image functionality not included) at .

The concept:
I would like to have it so that when I hover my cursor (displayed as a black circle) over the image, only the specific part of the image that the cursor is hovering over is shown, rather than the entire image.

The issue:
Where should I begin? I've come across some CodePens that utilize Z-Index for this effect. However, my attempts have not been fruitful so far. Any example website showcasing similar functionality would be greatly helpful.

For clearer understanding, here are two additional example images.

https://i.sstatic.net/MTE7p.png

In the first image, the smaller circle / cursor (black / turquoise circle) hovers over the circular text but does not intersect the actual image yet, hence it remains hidden.

https://i.sstatic.net/AAzAV.png
In the second image, the cursor is positioned slightly above the image, revealing that specific part of the image.

javascript html css image hover

Answer 1

Answer №1

One way to create a 'hole' in an element using CSS is by utilizing the mask property.

To achieve this effect, you can set the background of a div as the image that should be partially revealed, and then overlay it with an after pseudo-element. This pseudo-element should have the front image as its background, masked with a radial gradient positioned based on the mouse's coordinates.

Here's an example where a colored image is overlaid with a grayscale one:

window.onload = function() {
		  const div = document.querySelector('.hole');
		  let isIn = false;
		  div.addEventListener('mouseover', function() {
		    isIn = true;
		  });
		  div.addEventListener('mouseout', function() {
		    isIn = false;
		  });
		  div.addEventListener('mousemove', function() {
		    if (isIn) {
		      div.style.setProperty('--x', event.clientX + 'px');
		      div.style.setProperty('--y', event.clientY + 'px');
		    }
		  });
		}

.hole {
		  background-image: url(https://picsum.photos/id/1016/1024/768);
		  background-size: cover;
		  --x: 200px;
		  --y: 150px;
		  width: 100vw;
		  height: 100vh;
		  position: relative;
		}

		.hole::after {
		  content: '';
		  width: 100%;
		  height: 100%;
		  position: absolute;
		  top: 0;
		  left: 0;
		  background-image: url(https://picsum.photos/id/1016/1024/768?grayscale);
		  background-size: cover;
		  z-index: 1;
		  -webkit-mask-repeat: no-repeat no-repeat;
		  mask-repeat: no-repeat no-repeat;
		  -webkit-mask-image: radial-gradient(200px at var(--x) var(--y), transparent 95%, black 100%);
		  mask-image: radial-gradient(200px at var(--x) var(--y), transparent 95%, black 100%);
		}

<div class="hole"></div>

Answer 2

One way to create a 'hole' in an element using CSS is by utilizing the mask property.

To achieve this effect, you can set the background of a div as the image that should be partially revealed, and then overlay it with an after pseudo-element. This pseudo-element should have the front image as its background, masked with a radial gradient positioned based on the mouse's coordinates.

Here's an example where a colored image is overlaid with a grayscale one:

window.onload = function() {
		  const div = document.querySelector('.hole');
		  let isIn = false;
		  div.addEventListener('mouseover', function() {
		    isIn = true;
		  });
		  div.addEventListener('mouseout', function() {
		    isIn = false;
		  });
		  div.addEventListener('mousemove', function() {
		    if (isIn) {
		      div.style.setProperty('--x', event.clientX + 'px');
		      div.style.setProperty('--y', event.clientY + 'px');
		    }
		  });
		}

.hole {
		  background-image: url(https://picsum.photos/id/1016/1024/768);
		  background-size: cover;
		  --x: 200px;
		  --y: 150px;
		  width: 100vw;
		  height: 100vh;
		  position: relative;
		}

		.hole::after {
		  content: '';
		  width: 100%;
		  height: 100%;
		  position: absolute;
		  top: 0;
		  left: 0;
		  background-image: url(https://picsum.photos/id/1016/1024/768?grayscale);
		  background-size: cover;
		  z-index: 1;
		  -webkit-mask-repeat: no-repeat no-repeat;
		  mask-repeat: no-repeat no-repeat;
		  -webkit-mask-image: radial-gradient(200px at var(--x) var(--y), transparent 95%, black 100%);
		  mask-image: radial-gradient(200px at var(--x) var(--y), transparent 95%, black 100%);
		}

<div class="hole"></div>

Answer 3

Answer №2

To display the front image under the mouse cursor, you can utilize the CSS property clip-path along with a mousemove event listener. Make sure to reset the clip-path when the mouse leaves the element.

Here's a basic example incorporating an invert filter on the overlay image using CSS. You could enhance this by implementing event delegation for managing multiple overlays and more complex interactions.


const overlay = document.querySelector('.overlay');

overlay.addEventListener('mousemove', e => {
  const { height, width } = e.currentTarget.getBoundingClientRect();
  
  const x = e.offsetX;
  const y = e.offsetY;
  
  const xPercent = Math.round((x / width) * 100);
  const yPercent = Math.round((y / height) * 100);

  e.currentTarget.style.clipPath = `circle(18% at ${xPercent}% ${yPercent}%)`;
});

overlay.addEventListener('mouseleave', e => {
  e.currentTarget.style.clipPath = null; 
});


.container {
  position: relative;
}

.container img {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.overlay {
  filter: invert(var(--value, 100%));
  clip-path: circle(0 at 49% 45%);
}

<div class='container'>
  <img src='https://source.unsplash.com/random' />    
  <img src='https://source.unsplash.com/random' class='overlay'/>
</div>

Answer 4

To display the front image under the mouse cursor, you can utilize the CSS property clip-path along with a mousemove event listener. Make sure to reset the clip-path when the mouse leaves the element.

Here's a basic example incorporating an invert filter on the overlay image using CSS. You could enhance this by implementing event delegation for managing multiple overlays and more complex interactions.


const overlay = document.querySelector('.overlay');

overlay.addEventListener('mousemove', e => {
  const { height, width } = e.currentTarget.getBoundingClientRect();
  
  const x = e.offsetX;
  const y = e.offsetY;
  
  const xPercent = Math.round((x / width) * 100);
  const yPercent = Math.round((y / height) * 100);

  e.currentTarget.style.clipPath = `circle(18% at ${xPercent}% ${yPercent}%)`;
});

overlay.addEventListener('mouseleave', e => {
  e.currentTarget.style.clipPath = null; 
});


.container {
  position: relative;
}

.container img {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.overlay {
  filter: invert(var(--value, 100%));
  clip-path: circle(0 at 49% 45%);
}

<div class='container'>
  <img src='https://source.unsplash.com/random' />    
  <img src='https://source.unsplash.com/random' class='overlay'/>
</div>

Show only the portion of the image where the cursor is currently hovering

Answer №1

Answer №2

Similar questions

Find the current elapsed time using Wavesurfer in real time

Looking for a straightforward way to incorporate a "Read more" and "Show Less" functionality into a Wordpress site using Javascript?

exploring the contrast of css versus javascript selectors

Reusing Form HTML Elements Based on Conditions

Embarking on the journey of launching an Angular application on AWS CloudFront

Create a prototype class in NuxtJS Vue

Is there a way to prevent a page from rendering until the necessary data is retrieved?

Leveraging the power of Ajax and Javascript to handle and process conditional if/else statements

Issue with Angular 7: In a ReactiveForm, mat-select does not allow setting a default option without using ngModel

transfer properties to a dynamic sub element

Mobile device causing elements to resize unevenly

Attempting to retrieve all elements... held within a parent object in JavaScript

Prevent discrepancies between the outcome on the server and the client side

Inheritance of nested directives in Angular.js

jQuery - accessing a different class within the object

To restore the position of the chosen object in Three.js after clicking reset

Encountering issues when attempting to create a service worker in a Vue.js application using Workbox's injectManifest feature

Struggling with defining the default value for a JavaScript array

Is there a way to deactivate specific options within the "Select" component on Material-UI, similar to how it is done in the "Autocomplete" feature?

An unexpected problem with text redirection that should not be happening