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
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>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>