css clip-path hover effect restricted to specific shape

In the codepen I created, there are two greyscaled shapes. Currently, it's only possible to hover over one of them, as the original size is a box that overlaps both images. Is there a way to detect the shape being hovered over? Z-index hasn't provided a solution so far... I hope someone can assist me with this! It would be ideal to achieve this without using JavaScript, but it's not a dealbreaker.

HTML:

<div id="one">
<img src="https://cdn.pixabay.com/photo/2019/01/19/15/53/ice- 
3941906_1280.jpg">
 </div>
<div id="two">
<img src="https://cdn.pixabay.com/photo/2016/04/20/17/02/tuscany- 
1341536_1280.jpg">
</div>

CSS:

img{
  width: 700px;
  height: 400px;
  object-fit: cover;
}

#one img{
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
clip-path: polygon(0 0, 0% 100%, 100% 0);
}

#two img{
  -webkit-clip-path: polygon(100% 100%, 0% 100%, 100% 0);
clip-path: polygon(100% 100%, 0% 100%, 100% 0);
}

#one{
  position: absolute;
  z-index: 0;
  top: 0 ;
  left: 0;
}

#two{
position:absolute;
  top: 0px;
  left: 0;
  z-index: 0;
}

#one,
#two{
  filter:grayscale(100%);
}

#one:hover,
#two:hover{
  filter:grayscale(0%);
}

https://codepen.io/robwe30/pen/eXBvzp?editors=1100

Cheers

javascripthtmlcss

Answer №1

To create a unique effect with a simple shape, try using the pointer-events property to hide it and then reveal it with a rotated pseudo-element placed on a specific part of the image.

Learn more about pointer-events here

Check out the example below

/* CSS code to toggle pointer-events on/off */

#two {
  position: relative;
  overflow: hidden; /* ensure pseudo-element does not spill out */
  pointer-events: none;
}

#two:before {
  pointer-events: auto;
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  width: 150%;
  height: 100%;
  
  /* adjust transform based on image ratio */
  transform-origin: top left;
  transform: rotate(-30deg);
  
  /* for visualization, you can add borders or background */
}

/* End of CSS code */

img {
  width: 700px;
  height: 400px;
  object-fit: cover;
  display: block; /* prevent gap below image */
}

#one img {
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}

#two img {
  -webkit-clip-path: polygon(100% 100%, 0% 100%, 100% 0);
  clip-path: polygon(100% 100%, 0% 100%, 100% 0);
}

#one {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}

#two {
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 0;
}

#one,
#two {
  filter: sepia(100%); /* for demonstration purposes */
}

#one:hover,
#two:hover {
  filter: grayscale(0%);
}
<div id="one">
  <img src="https://picsum.photos/800/600?image=1060">
</div>
<div id="two">
  <img src="https://picsum.photos/800/600?image=1065">
</div>

View the live demo on CodePen

Answer №2

Here's a creative way to achieve the same effect with minimal code and without utilizing clip-path

.container {
  width: 300px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.container div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skewX(-56.3deg); /* tan(angle) = Width/height --> angle = arctan(width/height) */
  transform-origin: top;
  overflow: hidden;
}

.container div img {
  transform: skewX(56.3deg);
  transform-origin: top;
}
.container img:hover{
   filter:grayscale(100%);
}
<div class="container">
  <img src="https://picsum.photos/800/600?image=1069">
  <div>
    <img src="https://picsum.photos/800/600?image=1051">
  </div>
</div>

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

What caused the mat-date calendar style to malfunction?

I integrated mat-date into my Angular project, but encountered an issue where the styles of the calendar were not displaying properly when clicking the icon. Here is the displayed calendar effect I attempted to troubleshoot by commenting out the styles o ...

cssangularmaterial-uiangular-materialmat-datepicker

Displaying the content of a modal window

I am working on a modal that needs to print only the content within it, nothing else. Here is the setup for the button inside the modal: This should not be printed... <button id="btnPrint">Print (this btn should not be printed!)</button> ...

htmlcssangularjsbootstrap-modalangularjs-ng-click

Why are the random colors blending into the image?

After watching a tutorial on the YouTube channel Online Tutorials titled "Change Image Color Vanilla JavaScript," I am confused as to why some random colors from the click event are overlapping the image instead of just changing the color of the cat's ...

javascriptcssimagebackground-color

Develop a dynamic thunk and additional reducer to efficiently handle multiple API calls and retrieve data

Using Redux and Redux-Toolkit, I aim to streamline my code by implementing a single asynchronous Thunk and extra reducer for multiple requests. Below is the setup for both the company and client slices: import { createSlice, createAsyncThunk } from &apos ...

javascriptreactjsreduxreact-reduxredux-toolkit

Converting JSON data into an array of JavaScript objects

Here is some of the JSON data I have: [ { "items": [ { "retailername": "Zop Now", "value": 475 }, { "retailername": "Snap Deal", "value": 265 ...

javascriptjqueryjson

Wordpress Bubble Notification - Conceal at Zero / Reveal at One or More

I am a beginner in PHP and CSS. After extensive reading and learning little by little, I successfully implemented notifications in my project using PHP and CSS. It functions properly, displaying the counts (friends, messages, and notifications) and redire ...

phpcsswordpressnotifications

Ways to streamline a form containing several duplicate rows and make it more user-friendly

Looking for some advice on implementing a "working hours" module. Just need something simple like: Monday: 10:00 - 18:00 ... Saturday: 11:00-16:00 with some additional info. I'm currently attempting to... <form id="working_hours"> <s ...

phpjqueryhtmlweb

The PHP sorted array loses its order when encoded into JSON and then sorted in JavaScript

In my PHP code, I have two arrays that I need to work with. The first array is sorted using the arsort() function like this: arsort($array1); After sorting, I output the contents of both arrays like so: foreach ($array1 as $key => $val) { $output ...

javascriptphparrayssorting

How to upload a file with JavaScript without using Ajax technology

Is it possible to upload a file using the input tag with type='file' and save it in my project folder without using ajax? Can JavaScript help me achieve this task? Below is the code snippet I am currently working on: function func3() { var ...

javascripthtml

Eliminate all the zeros from the date string

Trying to work with a string that is in the format '01/02/2016' and my goal is to eliminate the leading zeros so I end up with '1/2/2016' using regex. So far, I have attempted '01/02/2016'.replace(/^0|[^\/]0./, '&ap ...

javascriptregexdate

Create HTML files that generate a log.txt document

It seems like every time I try to find a solution for writing files with PHP or JavaScript, I end up in a never-ending argument. Some say it's impossible, while others claim it's possible under certain conditions. Unfortunately, none of the code ...

phphtml

Styling with CSS: Utilize flexbox to adjust the layout of two elements, ensuring they

Trying to float an image to the right side of a paragraph is proving to be more challenging than anticipated. 100px +-------------------------+ +------------+ | | | | | ...

htmlcsscss-float

Troubleshooting CSS Display Problem on Chrome and Firefox

While working on the design of a website offline, everything seemed to be running smoothly. However, upon uploading it to the server, various issues began to arise. Initially, the file loaded correctly upon first visit. Unfortunately, after reloading the ...

htmlcssfirefoxgoogle-chrome

Display information upon the clicking of a button and update the color of the selected button

When a button is pressed, I want to display content and change the color of the active button. Currently, I can do each operation individually, but I'm struggling to merge these functionalities. This is how my script looks like for displaying the con ...

javascripthtmljquerycss

How can you establish an environmental variable in node.js and subsequently utilize it in the terminal?

Is there a way to dynamically set an environmental variable within a Node.js file execution? I am looking for something like this: process.env['VARIABLE'] = 'value'; Currently, I am running the JS file in terminal using a module whe ...

javascriptnode.jsvariablesenvironment-variables

Interactive section for user input

I am looking to add a commenting feature to my website that allows for dynamic editing. Essentially, I want users to be able to click on an "Edit" span next to a comment and have it transform into an editable textarea. Once the user makes their changes and ...

javascriptjqueryhtml

JavaScript: Can you clarify the value of this variable using five sets of double quotations?

Could you please review the code snippet below for me? <script type="text/javascript"> function recentpostslist(json) { document.write('<ul class="recommended">'); var i; var j; for (i = 0; i < json.feed.entry.length; i++) { ...

javascripthtmljsonbloggeraddition

Modifying an Object within a for-in loop

Hi there, I'm facing a challenge with updating an object that has child properties in my Angular application. Here is the initial object: $scope.osbStep = { test0Nav : { current : false, comp ...

javascriptangularjs

Converting JSON DateTime objects to local time in JQuery without considering timezones

I am struggling with parsing a JSON DateTime object using moment.js. Despite trying various methods recommended on Stackoverflow, nothing seems to work in my case. In my application, I save DateTime values in UTC format and when displaying them, I need to ...

javascriptc#jqueryangularjsmomentjs

Implementing a Push System without using node.JS

I am looking to develop a notification system similar to Facebook's, where notifications appear on the bottom-left side of the screen when someone interacts with your posts, for example. However, my challenge is that I need the server to send real-ti ...

phpjavascriptjquerynode.jspush-notification