How to change css of image when other element is hovered?

Question

i am making something where you can play html games on it. Here is my code:

<div class="card">
  <a href="pong.html" id="togame">
    <img src="pong.png" alt="Avatar" style="width:100%; border-radius: 15px 15px 0 0; height: 130px;" id="gimg">
    <div class="container">
      <h4 style="font-size: x-large; padding: 0%;">Pong</h4>
      <p>Recreated version of retro game "pong", or table tennis on computer</p>
    </div>
  </a>
</div>

can you make it so when i hover ona card anywhere, the images border-radius is changed? Thank you

Does this answer your question? [How to use 'hover' in CSS](https://stackoverflow.com/questions/905033/how-to-use-hover-in-css) — Fabian S., Jan 27 '22 at 13:36
You cannot with inline styles, you need a separate stylesheet. — skara9, Jan 27 '22 at 13:39

George Chond · Answer 1 · 2022-01-27T13:45:56.227

You need to get rid of inline styling, since it overrides anything that we declare in CSS.
So, I assigned a .rounded class in <img> tag. Then, you grab the parent element, which is .card, and you assign a hover rule on it. Then, you use the previously mentioned new class .rounded along with the change.
So you have something like this:

.rounded {
  border-radius: 15px 15px 0 0;
}

.card:hover .rounded {
  border-radius: 0;
}

.card {
  background: #ccc3;
}

<div class="card">
  <a href="pong.html" id="togame">
    <img src="https://via.placeholder.com/150x150" class="rounded" style="width:100%; height: 130px;" id="gimg">
    <div class="container">
      <h4 style="font-size: x-large; padding: 0%;">Pong</h4>
      <p>Recreated version of retro game "pong", or table tennis on computer</p>
    </div>
  </a>
</div>

score 0 · Answer 2 · answered Jan 27 '22 at 13:46

You can :

Add a class to your <img> tag as I did like class="imgHover"
Create a CSS file and add the following line :

.card:hover .imgHover { border-radius : 10px 10px 0 0 }
Modify the border-radius values as you wish

.card:hover .imgHover { border-radius : 10px 10px 0 0 }

.imgHover {
 width:100%;
 height: 130px
}

<div class="card">
  <a href="pong.html" id="togame">
    <img class="imgHover" src="pong.png" alt="Avatar" id="gimg">
    <div class="container">
      <h4 style="font-size: x-large; padding: 0%;">Pong</h4> 
      <p>Recreated version of retro game "pong", or table tennis on computer</p> 
    </div>
  </a>
</div>

How to change css of image when other element is hovered?

2 Answers2