:hover действует на потомка вместе с родителем. Как этого избежать в CSS?

Question

Суть: есть контейнер div, в нем контент с изображением img. Контейнер меньше контента и скрывает лишнюю часть картинки overflow:hidden. При наведении нужно увеличить границы контейнера до размера изображения. Но вместе с контейнером увеличивается и часть изображения. Как отвязать div от img при трансформации (запретить трансформировать вложенный контент)?

_________________________________________________________________________________________
<body>
    <div class="container"><img src="/img.jpg" alt="img" class="content"></div>
</body>
_________________________________________________________________________________________
.container {                          //изображение 300*300 пикселей,  
    width: 100px;                       рамка контейнера 100*100 пикселей.
    height: 100px;
    overflow: hidden;
    transition: ease 1s;
    transform-origin: left top;
}
.container:hover {                   //изображение 900*900, рамка 300*300,а 
    transform: scale(3);               должно быть:изображение 300*300 и рамка 300*300!
}
_________________________________________________________________________________________

Answer 1

scale(), как и многие другие функции transform, изменяет не только элемент на котором вызван, но и его дочерние элементы.

Самый простой способ увеличить элемент, но не трогать его дочерние - задать дочерним противоположное значение на уменьшение.

body {height: 100vh; overflow: hidden; margin: 0;}

.parent, .child {
  display: block;
  position: absolute;
  transition: transform .2s ease;
}

.parent {
  width: 100px;
  height: 100px;
  background: red;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}

.child {
  width: 50px;
  height: 50px;
  background: blue;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
}

.parent:hover {
  transform: scale(3);
}

.parent:hover .child {
  transform: scale(calc(1 / 3));
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 2

Я предлагаю просто сделать два отдельных слоя, два блока в родителе.
При наведении на родителя можно изменять любого ребёнка как угодно.
Родитель при этом не трансформируется, это удобно

* {
  box-sizing: inherit;
}

html, body {
  height: 100%;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent {
  position: relative;
  cursor: pointer;
}

.parent {
  --size: 50px;
  width: var(--size);
  height: var(--size);
}

.parent__layer {
  position: absolute;
  left: 0;
  top: 0;
}

.parent__layer_1 {
  width: 100%;
  height: 100%;
  background-color: red;
  transition: transform 0.2s ease-in-out;
}

.parent__layer_2 {
  left: calc(50% - var(--size) / 4);
  top: calc(50% - var(--size) / 4);
  width: 50%;
  height: 50%;
  background-color: black;
}

.parent:hover .parent__layer_1 {
  transform: scale(3);
}

<div class="parent">
  <div class="parent__layer parent__layer_1"></div>
  <div class="parent__layer parent__layer_2"></div>
</div>

БЛОГ НА HUSL

:hover действует на потомка вместе с родителем. Как этого избежать в CSS?

Ответы (2 шт):