Mientras navegaba por la mayoría de los sitios web, ha visto algunos efectos especiales que se pueden ver en varias imágenes al colocar el cursor sobre ellas. Entonces, en este artículo vamos a implementar lo mismo. Podemos usar tales imágenes como una tarjeta para nuestro sitio web.
En este artículo, aprenderá cómo aplicar un efecto brillante a una imagen en particular, cuando coloque el cursor sobre ella, verá ese efecto. Lo implementaremos usando HTML y CSS . Se proporciona un video de muestra para que entiendas más claramente lo que vas a desarrollar en este artículo.
Implementación paso a paso
Paso 1: código HTML para la imagen:
HTML
<!-- Give a suitable heading using h1 tag--> <h1 style="color: green; text-align: center;"> GeeksForGeeks Glowling Card </h1> <div class="container"> <!-- Set a image a background named gfg.jpg present in images folder --> <img class="GFG" src="images/gfg.jpg" alt="GeeksForGeeks" /> </div>
Paso 2: Diseñar la imagen usando CSS:
Ahora, aplicaremos algunas propiedades CSS para decorar la imagen y también corregiremos su posición en la página web. La clave es usar la propiedad box-shadow de CSS para iluminar la imagen cuando el usuario coloca el cursor sobre la imagen. Aquí está el código CSS interno que se le proporcionó como ayuda.
HTML
<style>
.GFG{
width:200px ;
height:250px;
margin-left: 550px;
border-radius: 10%;
}
.GFG:hover{
color: #111;
background: greenyellow;
box-shadow: 0 0 100px greenyellow;
}
</style>
Ejemplo:
Este ejemplo utiliza la propiedad box-shadow para aplicar un efecto brillante a la imagen. Puede cambiar el color brillante de fondo según usted.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.GFG {
width: 200px;
height: 250px;
margin-left: 550px;
border-radius: 10%;
}
.GFG:hover {
color: #111;
background: greenyellow;
box-shadow: 0 0 100px greenyellow;
}
</style>
</head>
<body>
<!-- Give a suitable heading using h1 tag-->
<h1 style="color: green; text-align: center;">
GeeksForGeeks Glowling Card
</h1>
<div class="container">
<!-- Set a image a background named
gfg.jpg present in images folder -->
<img class="GFG" src="images/gfg.jpg"
alt="GeeksForGeeks" />
</div>
</body>
</html>
eso es todo por este artículo. Aquí está el video de salida del código anterior.
Producción:
Publicación traducida automáticamente
Artículo escrito por riyamathur y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA