Блог

Главная - Вопросы по программированию - css клип-наведение курсора только на фигуру

css клип-наведение курсора только на фигуру

#javascript #html #css

#javascript #HTML #css

Вопрос:

как видно из моего codepen, есть две фигуры в оттенках серого. Теперь можно навести курсор только на одно из обоих изображений, потому что исходный размер представляет собой прямоугольник и перекрывает оба изображения. Но есть ли способ, позволяющий распознавать фигуру при наведении на нее курсора? Z-индекс не приводит к результату… Надеюсь, вы сможете мне немного помочь! было бы здорово без JS, но это не k.o.

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

Приветствия

Ответ №1:

Для этой простой фигуры вы можете поиграть с pointer-events , чтобы удалить ее, и повернуть псевдоэлемент, чтобы снова включить его только в одной части изображения.

о событиях указателя https://css-tricks.com/almanac/properties/p/pointer-events /

пример

 /* CSS switch of  pointer-events  on/off */

#two {
  position: relative;
  overflow: hidden;/* hide pseudo overflowing */
  pointer-events: none;
}

#two:before {
  pointer-events: auto;
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  width: 150%;
  height: 100%;
  
  /* set transform according to ratio image */
  transform-origin: top left;
  transform: rotate(-30deg);
  
  /* if you want to see where it stands , add borders or background */
}


/* end CSS  switch */

img {
  width: 700px;
  height: 400px;
  object-fit: cover;
  display: block;/* avoids gap underneath */
}

#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%);/* demo purpose */
}

#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>

https://codepen.io/gc-nomade/pen/aMBwYz

Комментарии:

1. Я меняю изображения, потому что используемые не работают для меня…

2. @TemaniAfif вот почему я изменил фильтр (серый) на фильтр (сепия), чтобы показать, что эффект наведения работает

Ответ №2:

Вот еще одна идея создать то же самое, используя меньше кода и без 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>