Cómo eliminar el contenedor lineal debajo de una imagen insertada en hipervínculo

pedro56 · 26 Dic 2017

Hola Chicos/as,

Tengo un inconveniente al insertar una imagen en un hipervínculo. A continuación, muestro una captura de pantalla para describir dicho problema:

Lo que ocurre aquí, es que aparece un contenedor lineal debajo de la imagen que me gustaría eliminar u ocultar.

Este es código fuente que tengo:

HTML:

<!DOCTYPE html>
<html lang="es-CO">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titulo Aqui</title>
  <style type="text/css">
  * {
  border:1px blue solid;
  }
  img:hover {
  transform:rotate(10deg);
  }
  img {
  max-width:50%;
  height:auto;
  margin:5% 25%;
  }
  </style>
 </head>
 <body>
 <div>
 <a href="http://google.com/"><img src="sin-titulo.png"></a>
 </div>
 </body>
</html>

¿Alguna idea de cómo resolver esto o del por qué sucede? Gracias de antemano, saludos

MrDeveloper · 26 Dic 2017

El problema está en tu CSS:

Insertar CODE, HTML o PHP:

* {
  border:1px blue solid;
  }

Acá estás poniendo un borde azul a todos los elementos del sitio web.

Si deseas que eso quede así entonces tendrías que agregar este otro CSS :

Insertar CODE, HTML o PHP:

a, img, a img, a:hover, a:link, a:focus {
border: 0;
outline: none;
text-decoration: none;
}

pedro56 · 26 Dic 2017

[MENTION=179762]MrDeveloper[/MENTION], ya quite:

HTML:

Avatar de MrDeveloper MrDeveloper

Y coloque:

HTML:

a, img, a img, a:hover, a:link, a:focus {
border: 0;
outline: none;
text-decoration: none;
}

Y el problema persiste.

Por favor pasa el puntero de ratón por debajo de la imagen para que lo notes.

Karasu · 26 Dic 2017

[MENTION=44861]pedro56[/MENTION] ¿Qué necesitas exactamente? ¿Quitar el borde azul o la rotación de la imagen?

En todo caso, prueba con esto:

HTML:

 a {
display: block;
}

Cómo eliminar el contenedor lineal debajo de una imagen insertada en hipervínculo

pedro56

MrDeveloper

pedro56

Karasu