html - Увеличение картинки вместе с текстом при наведении

Рейтинг: -2Ответов: 1Опубликовано: 21.02.2023

Мне надо, чтобы при наведении на текст или на картинку увеличивалось всё: текст, картинка и задняя серая панель

Но сейчас, при наведении на текст, он увеличивается, а картинка пропадает, а при наведении на картинку она просто увеличивается.

Я новичок и был бы рад, если вы мне поможете

.hundred-rubliks img {
  width: 160px;
  height: 160px;
  margin-left: 48px;
  margin-top: 280px;
  position: absolute;
  top: 20px;
  left: 20px;
  transition: 0.35s;
}

.hundred-rubliks p{
  width: 200px;
  height: 210px;
  margin-top: 300px;
  margin-left: 50px;
  background-color: #7e7e7e;
  box-shadow: 5px 5px 10px 2px #222;
  border-radius: 10px;
  font-size: 20.8px;
  font-family: "Arial Black";
  text-align: center;
  transition: 0.35s;
}

.hundred-rubliks :hover{
  transform: scale(1.075);
}
<div class="hundred-rubliks">
                <img src="***" 
                     alt="Icon"
                     width="40">
                <p><br><br><br><br><br><br>100 рубликов</p>
            </div>

css html hover
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Я бы реализовал так

.hundred-rubliks {
  width: 200px;
  height: 210px;
  box-shadow: 5px 5px 10px 2px #222;
  border-radius: 10px;
  transition: 0.35s;
  background-image: url(https://dummyimage.com/200x210/ff9900/43455e.jpg&text=Foto);
  background-repeat: no-repeat;
  background-size: 50px 50px;
  background-position: 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: #7e7e7e;
}

.hundred-rubliks p {
  font-size: 20.8px;
  font-family: "Arial Black";
}

.hundred-rubliks:hover {
  transform: scale(1.075);
}
<div class="hundred-rubliks">
  <p>100 рубликов</p>
</div>