Как сделать hover картинки что бы при попадании на рубрику не было скачков?

Question

[freeman0204]

https://jsfiddle.net/1y6peg47/3/ если навожу на картинку то она увеличивается, но если курсор попадает на рубрику то эффект пропадает и получается дерганье. Как здалась так что бы эффект ховера на рубрике работал но этого дерганья не было?

Answer 1

[Alams Stoyne]

Если задача что бы эффект увлечения фото не пропадал при наведении на #описание то добавь правило для элемента с классом "rubric"
pointer-events: none;
Но учти что тогда и на клик элемента с классом "rubric" перестанет реагировать (но это не беда так как судя по коду картинка тоже является ссылкой )

Comments

[freeman0204]

Я так делал, но ховер на рубрике теперь не работает.

[Alams Stoyne]

freeman0204, тогда отлавливай hover на wrapper_images

.rubric {
  position: absolute;
  top: 30px;
  left: 20px;
  min-height: 29px;
  border-radius: 14px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: segoeuib;
  transition: .5s;
  z-index: 999;

  &:hover {
    transition: .5s;
    background-color: red;
  }
}

.block {
  .wrapper_images {
    position: relative;
			width: 350px;
		height: 350px;
			overflow: hidden;
    &:hover { 
      img {
        transform: scale(1.2);
        transition: .3s;
      }
    }
  }
  img {
    transition: .3s;
    transform: scale(1);
	
    &:hover {
      transform: scale(1.2);
      transition: .3s;
    }
  }
}

Answer 2

[Даниил Сугоняев]

От такого дерганья не избавиться. Советую вам оставить эффект увеличения картинки и при наведении на рубрику. Это будет лучше смотреться и не будет дерганий. А для более плавного поведения анимации добавьте родителю (img) - will-change: transform;

Comments

[freeman0204]

Советую вам оставить эффект увеличения картинки и при наведении на рубрику.

Так мне так и нужно? Как это сделать? Вернее мне нужно что бы при наведении на рубрику эффект увеличения ни пропадал с картинки.

[Даниил Сугоняев]

freeman0204, исправил ваше решение
https://jsfiddle.net/1y6peg47/4/

[freeman0204]

Даниил Сугоняев, Спасибо!

[Алексей]

freeman0204, поменять порядок элементов, что бы при hover можно было выбирать следующий элемент.

Answer 3

[Конан Варвар]

Та вроде не дергается)

Comments

[freeman0204]

Мне нужно что бы при наведении на рубрику эффект увеличения ни пропадал с картинки.