Crear un efecto de superposición simplemente significa juntar dos div en el mismo lugar, pero ambos div aparecen cuando es necesario, es decir, mientras se desplaza o al hacer clic en uno de los div para que aparezca el segundo. Las superposiciones son muy limpias y le dan a la página web un aspecto ordenado. Se ve sofisticado y es simple de diseñar. Las superposiciones se pueden crear usando dos propiedades CSS simples:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>overlay div</title>
<style>
.geeks {
position: absolute;
justify-content: center;
text-align: center;
align-items: center;
height: 250px;
width: 500px;
background-color: rgb(36, 168, 36);
}
.gfg1 {
margin-top: 80px;
color: white;
font-size: 40px;
font-weight: bold;
}
.gfg2{
font-size: 20px;
}
</style>
</head>
<body>
<div class="geeks">
<div class="gfg1">GeeksforGeeks</div>
<div class="gfg2">A computer science portal for geeks</div>
</div>
</body>
</html>
Producción:
Nota: personalice los efectos de superposición agregando más CSS a la página para que se vea más elegante.
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>overlay div</title>
<style>
.geeks {
position: absolute;
justify-content: center;
text-align: center;
align-items: center;
height: 250px;
width: 500px;
background-color: rgb(36, 168, 36);
font-size: 20px;
}
.gfg1 {
margin-top: 80px;
color: white;
font-size: 40px;
font-weight: bold;
}
.gfg1:hover {
z-index: -1;
opacity: 0.5;
font-size: 20px;
text-align: center;
transform-style: all;
transition-duration: 1s;
}
.gfg2:hover {
z-index: -1;
font-size: 40px;
text-align: center;
transform-style: all;
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="geeks">
<div class="gfg1">GeeksforGeeks</div>
<div class="gfg2">A computer science portal for geeks</div>
</div>
</body>
</html>
Producción:
Antes de flotar:
Después de flotar:
Los navegadores compatibles se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por RahulRanjan4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA