CSS/HTML: Hover image, animate text not working

Question

I want to slide the text { transform: scale(1.3) translate(0px, 40px); } while I am hovering the image, (with class="img"), but I don't know why this is not working.

.img {
  position: relative;
  margin: 50px;
  transition: transform 0.5s;
  border-radius: 85px;
}

.img:hover {
  position: relative;
  cursor: pointer;
  transform: scale(1.3) translate(0px, -80px);
  z-index: 100;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.525);
  border-radius: 85px;
}

.caption {
  overflow: hidden;
  margin-top: -150px;
  transition: transform 0.5s;
}

.img:hover .caption {
  transform: scale(1.3) translate(0px, 40px);
  overflow: auto;
}

<div class="container">
  <ul>
    <li>
      <a href="games/tictactoe.html"><img id="picture" class="img" src="https://picsum.photos/100/100" alt="TicTacToe"></a>
      <div class="caption">
        <h3 class="gametitle">Tic Tac Toe</h3>
        <h2>Game for two players</h2>
      </div>
    </li>

    <li>
      <a href="games/battleship.html"><img class="img" src="https://picsum.photos/100/100" alt="battleShip"></a>
      <div class="caption">
        <h3 class="gametitle">Battle Ship</h3>
        <h2>Game for two players</h2>
      </div>
    </li>

    <li>
      <a href="games/pythagoreantable.html"><img class="img" src="https://picsum.photos/100/100" alt="pythagoreantable"></a>
      <div class="caption">
        <h3 class="gametitle">Pythagorean Table</h3>
        <h2>Tool</h2>
      </div>
    </li>
  </ul>
</div>

I think the string ".img:hover .caption" is wrong, I tried in other ways but no one worked. Thanks for the help

You are trying to do something that is not possible to achieve only with css and with your html structure. I you want to do so, you will need to make it with js or jQuery. `:hover`element will work on sibling at best. But here you are trying to modify a parent sibling. — MaxiGui, Oct 02 '20 at 15:53
Ok then yeah as the good answer. You must do it on parent of image at least. — MaxiGui, Oct 02 '20 at 18:55

score 0 · Accepted Answer · answered Oct 02 '20 at 15:52

The rule selector .img:hover .caption won't find work because .caption is not a child of .img.

A simple solution would be to use the li as the hover target:

.img {
  position: relative;
  margin: 50px;
  transition: transform 0.5s;
  border-radius: 85px;
}

li:hover .img {
  position: relative;
  cursor: pointer;
  transform: scale(1.3) translate(0px, -80px);
  z-index: 100;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.525);
  border-radius: 85px;
}

.caption {
  overflow: hidden;
  margin-top: -150px;
  transition: transform 0.5s;
}

li:hover .caption {
  transform: scale(1.3) translate(0px, 40px);
  overflow: auto;
}

<div class="container">
  <ul>
    <li>
      <a href="games/tictactoe.html"><img id="picture" class="img" src="https://picsum.photos/100/100" alt="TicTacToe"></a>
      <div class="caption">
        <h3 class="gametitle">Tic Tac Toe</h3>
        <h2>Game for two players</h2>
      </div>
    </li>

    <li>
      <a href="games/battleship.html"><img class="img" src="https://picsum.photos/100/100" alt="battleShip"></a>
      <div class="caption">
        <h3 class="gametitle">Battle Ship</h3>
        <h2>Game for two players</h2>
      </div>
    </li>

    <li>
      <a href="games/pythagoreantable.html"><img class="img" src="https://picsum.photos/100/100" alt="pythagoreantable"></a>
      <div class="caption">
        <h3 class="gametitle">Pythagorean Table</h3>
        <h2>Tool</h2>
      </div>
    </li>
  </ul>
</div>

score 0 · Answer 2 · answered Oct 02 '20 at 16:05

There is no possible CSS method within your HTML structure to change .caption when hovering img, because img is one level lower and there is no parent selector.

But img is wrapped in an a tag, and a is a sibling of .content, so you can use a sibling selector:

li a:first-child + .caption

And for hovering:

li a:first-child:hover + .caption

I added li and :first-child to only select those a elements in your code which contain img with class .img. But that's not 100% reliable (there could be a similar structure somewhere else in the document), so it would be better if you use a class on those a tags and use that class in your selector to clearly exclude any other a tags.

.img {
  position: relative;
  margin: 50px;
  transition: transform 0.5s;
  border-radius: 85px;
}

.img:hover {
  position: relative;
  cursor: pointer;
  transform: scale(1.3) translate(0px, -80px);
  z-index: 100;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.525);
  border-radius: 85px;
}

li a:first-child + .caption {
  overflow: hidden;
  margin-top: -150px;
  transition: transform 0.5s;
}

li a:first-child:hover + .caption {
  transform: scale(1.3) translate(0px, 40px);
  overflow: auto;
}

<div class="container">
  <ul>
    <li>
      <a href="games/tictactoe.html"><img id="picture" class="img" src="https://picsum.photos/100/100" alt="TicTacToe"></a>
      <div class="caption">
        <h3 class="gametitle">Tic Tac Toe</h3>
        <h2>Game for two players</h2>
      </div>
    </li>

    <li>
      <a href="games/battleship.html"><img class="img" src="https://picsum.photos/100/100" alt="battleShip"></a>
      <div class="caption">
        <h3 class="gametitle">Battle Ship</h3>
        <h2>Game for two players</h2>
      </div>
    </li>

    <li>
      <a href="games/pythagoreantable.html"><img class="img" src="https://picsum.photos/100/100" alt="pythagoreantable"></a>
      <div class="caption">
        <h3 class="gametitle">Pythagorean Table</h3>
        <h2>Tool</h2>
      </div>
    </li>
  </ul>
</div>

CSS/HTML: Hover image, animate text not working

2 Answers2