Estoy haciendo algo en lo que puedes jugar juegos html. Aquí está mi código:
<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>¿Puedes hacer que cuando pase el mouse sobre una tarjeta en cualquier lugar, se cambie el radio del borde de las imágenes? Gracias
Debe deshacerse del estilo en línea, ya que anula todo lo que declaramos en CSS.
Entonces, asigné una clase .rounded en la etiqueta <img> . Luego, toma el elemento principal, que es .card , y le asigna una regla de desplazamiento. Luego, usa la nueva clase mencionada anteriormente .rounded junto con el cambio.
Así que tienes algo como esto:
.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>Puedes :
Agregue una clase a su etiqueta <img> como me gustó class="imgHover"
Cree un archivo CSS y agregue la siguiente línea:
.card:hover .imgHover { borde-radio : 10px 10px 0 0 }
Modifique los valores border-radius como desee
.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>