Image is not Scaling up on Hover

user_12960871 0
Viewed 41

When I hover on the images it's not scaling up. I'm using transform: scale() to get that functionality. I want to scale the image when I hover through them.

Somebody please help me to solve this.

.row__posters {
  display: flex;
}

.row__poster {
  object-fit: contain;
  width: 100%;
  max-height: 100px;
  margin-right: 0.6em;
  transition: transform 450ms;
}

.row__poster :hover {
  transform: scale(1.08);
}
<div class="row">
  <h2>Heading</h2>

  <div class="row__posters">

    <img class="row__poster" src="https://www.allaboutbirds.org/news/wp-content/uploads/2020/03/tricolored-heron-dorian-anderson-texas-124505431-1800-1280x853.jpg" alt="bird" /><img class="row__poster" src="https://www.allaboutbirds.org/news/wp-content/uploads/2020/03/tricolored-heron-dorian-anderson-texas-124505431-1800-1280x853.jpg"
      alt="bird" />
  </div>
</div>

css html
2 Answers

You have a little syntax mistake in css.

.row__poster :hover

should be

.row__poster:hover


.row__posters {
  display: flex;
}

.row__poster {
  object-fit:contain;
  width: 100%;
  max-height: 100px;
  margin-right: 0.6em;
  transition: transform 450ms;
}

.row__poster:hover {
  transform: scale(1.08);
}
<div class="row">
  <h2>Heading</h2>

  <div class="row__posters">

    <img class="row__poster" src="https://www.allaboutbirds.org/news/wp-content/uploads/2020/03/tricolored-heron-dorian-anderson-texas-124505431-1800-1280x853.jpg" alt="bird" /><img class="row__poster" src="https://www.allaboutbirds.org/news/wp-content/uploads/2020/03/tricolored-heron-dorian-anderson-texas-124505431-1800-1280x853.jpg"
      alt="bird" />
  </div>
</div>

user_109442190

You're giving extra space for pseudo class :hover it was row_poster :hover but fixing it will make row_post:hover

.row__posters {
  display: flex;
}

.row__poster {
  object-fit: contain;
  width: 100%;
  max-height: 100px;
  margin-right: 0.6em;
  transition: transform 450ms;
}

.row__poster:hover {
  transform: scale(1.08);
}
<div class="row">
  <h2>Heading</h2>

  <div class="row__posters">

    <img class="row__poster" src="https://www.allaboutbirds.org/news/wp-content/uploads/2020/03/tricolored-heron-dorian-anderson-texas-124505431-1800-1280x853.jpg" alt="bird" /><img class="row__poster" src="https://www.allaboutbirds.org/news/wp-content/uploads/2020/03/tricolored-heron-dorian-anderson-texas-124505431-1800-1280x853.jpg"
      alt="bird" />
  </div>
</div>

user_93136760
Related