¿Cómo crear una superposición de imagen flotante usando HTML y CSS?

En este artículo, repasaremos 5 tipos diferentes de superposiciones: izquierda, derecha, arriba, abajo y difuminada. Vas a necesitar dos divs. Uno será su div de superposición, que contendrá lo que se mostrará una vez que el usuario pase el mouse sobre la imagen, y el otro será un contenedor que contendrá tanto la imagen como su superposición. El div interno, que representa la superposición, tendrá dos clases. Uno que usará para diseñar todas las superposiciones y el otro representa el tipo de superposición específico (izquierda, derecha, arriba, abajo o desvanecido).

Su imagen debe colocarse fuera del div interior (superposición) pero dentro del exterior (contenedor). No olvide agregar un texto alternativo que describa la imagen para ayudar a los usuarios que confían en el lector de pantalla.

Código HTML:

<!DOCTYPE HTML>
<html>
  
<head>
    <meta charset="UTF-8">
    <title>Image Overlay</title>
</head>
  
<body>
    <center>
        <h1 class="title">
    GeeksforGeeks
    </h1>
        <b>Image Overlay</b>
        <br>
        <br>
        <div class="container">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"
                class="image">
            <div class="overlay overlayLeft"></div>
        </div>
    </center>
</body>
  
</html>

Código CSS: establezca la posición del contenedor en relación con su posición normal y defina su ancho y alto. La clave para que la superposición funcione es establecer su posición en absoluto. Eso significa que está posicionado en relación con su ancestro posicionado más cercano, que en este caso es la imagen. Para que la superposición no esté siempre allí y solo aparezca cuando el usuario pasa el cursor sobre la imagen, establezca su opacidad en cero, lo que significa que es completamente transparente. Use «color de fondo» para establecer el color de su superposición. Use «transición» para que la superposición aparezca gradualmente en lugar de aparecer sobre la imagen. Dado que establecemos la opacidad de la superposición en cero, una vez que pasemos el mouse sobre el contenedor, queremos establecer esa opacidad en 1. Eso significa que, una vez que el usuario pase el mouse sobre el elemento del contenedor, aparecerá la superposición.

<style>
    body {
        text-align: center;
    }
       
    h1 {
        color: green;
    }
       
    .container img {
        width: 250px;
        height: 250px;
    }
       
    .container {
        position: relative;
        width: 400px;
        height: auto;
    }
</style>

Superposición de desvanecimiento: el ancho y la altura de la superposición son el ancho y la altura de la imagen igual od div. Una vez que pasa el cursor sobre la imagen, la superposición aparece en la parte superior de esa imagen.

Programa:

<!DOCTYPE HTML>
<html>
  
<head>
    <meta charset="UTF-8">
    <title>Image Overlay</title>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
          
        .container img {
            width: 250px;
            height: 250px;
        }
          
        .container {
            position: relative;
            width: 400px;
            height: auto;
        }
          
        .overlay {
            position: absolute;
            transition: all 0.3s ease;
            opacity: 0;
            background-color: #9bcd9b;
        }
          
        .container:hover .overlay {
            opacity: 1;
        }
          
        .overlayFade {
            height: 250px;
            width: 250px;
            top: 0;
            left: 75px;
            background-color: #9bcd9b;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="title">
      GeeksforGeeks
    </h1>
        <b>Image Overlay</b>
        <br>
        <br>
        <div class="container">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png" 
                 class="image">
            <div class="overlay overlayFade"></div>
        </div>
    </center>
</body>
  
</html>

Producción:

Superposición izquierda: la altura de la superposición es la altura de la imagen (100%). El ancho es cero y se establece a la izquierda. El ancho se establece en 100 % una vez que se desplaza sobre la imagen y se mueve gradualmente de izquierda a derecha.

Programa:

<!DOCTYPE HTML>
<html>
  
<head>
    <meta charset="UTF-8">
    <title>Image Overlay</title>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
          
        .container img {
            width: 250px;
            height: 250px;
        }
          
        .container {
            position: relative;
            width: 400px;
            height: auto;
        }
          
        .overlay {
            position: absolute;
            transition: all 0.3s ease;
            opacity: 0;
            background-color: #9bcd9b;
        }
          
        .container:hover .overlay {
            opacity: 1;
        }
          
        .overlayLeft{
            height: 100%;
            width: 0;
            top: 0;
            left: 75px;
            background-color: #9bcd9b;;
        }
          
        .container:hover .overlayLeft{
        width: 250px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="title">
    GeeksforGeeks
    </h1>
        <b>Image Overlay</b>
        <br>
        <br>
        <div class="container">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"
                class="image">
            <div class="overlay overlayLeft"></div>
        </div>
    </center>
</body>
  
</html>                    

Producción:

Superposición derecha: la altura de la superposición es la altura de la imagen (100%). El ancho es cero y se establece a la derecha. El ancho se establece en 100 % una vez que se desplaza sobre la imagen y se mueve gradualmente de derecha a izquierda.

Programa:

<!DOCTYPE HTML>
<html>
  
<head>
    <meta charset="UTF-8">
    <title>Image Overlay</title>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
          
        .container img {
            width: 250px;
            height: 250px;
        }
          
        .container {
            position: relative;
            width: 400px;
            height: auto;
        }
          
        .overlay {
            position: absolute;
            transition: all 0.3s ease;
            opacity: 0;
            background-color: #9bcd9b;
        }
          
        .container:hover .overlay {
            opacity: 1;
        }
          
        .overlayRight{
            height: 100%;
            width: 0;
            top: 0;
            right: 75px;
            background-color: #9bcd9b;;
        }
          
        .container:hover .overlayRight{
        width: 250px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="title">
    GeeksforGeeks
    </h1>
        <b>Image Overlay</b>
        <br>
        <br>
        <div class="container">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"
                class="image">
            <div class="overlay overlayRight"></div>
        </div>
    </center>
</body>
  
</html>                    

Producción:

Superposición superior: el ancho de la superposición es el ancho de la imagen (100%). La altura es cero y se establece en la parte superior. La altura se establece en 100 % una vez que se desplaza sobre la imagen y se mueve gradualmente de arriba a abajo.

Programa:

<!DOCTYPE HTML>
<html>
  
<head>
    <meta charset="UTF-8">
    <title>Image Overlay</title>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
          
        .container img {
            width: 250px;
            height: 250px;
        }
          
        .container {
            position: relative;
            width: 400px;
            height: auto;
        }
          
        .overlay {
            position: absolute;
            transition: all 0.3s ease;
            opacity: 0;
            background-color: #9bcd9b;
        }
          
        .container:hover .overlay {
            opacity: 1;
        }
          
        .overlayTop{
            width: 250px;
            height: 0;
            top: 0;
            right: 75px;
            background-color: #9bcd9b;;
        }
          
        .container:hover .overlayTop{
        height: 250px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="title">
    GeeksforGeeks
    </h1>
        <b>Image Overlay</b>
        <br>
        <br>
        <div class="container">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"
                class="image">
            <div class="overlay overlayTop"></div>
        </div>
    </center>
</body>
  
</html>                    

Producción:

Superposición inferior: el ancho de la superposición es el ancho de la imagen (100%). La altura es cero y se establece en la parte inferior. La altura se establece en 100 % una vez que pasa el cursor sobre la imagen y se mueve gradualmente de abajo hacia arriba.

Programa:

<!DOCTYPE HTML>
<html>
  
<head>
    <meta charset="UTF-8">
    <title>Image Overlay</title>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
          
        .container img {
            width: 250px;
            height: 250px;
        }
          
        .container {
            position: relative;
            width: 400px;
            height: auto;
        }
          
        .overlay {
            position: absolute;
            transition: all 0.3s ease;
            opacity: 0;
            background-color: #9bcd9b;
        }
          
        .container:hover .overlay {
            opacity: 1;
        }
          
        .overlayBottom{
            width: 250px;
            height: 0;
            bottom: 0;
            right: 75px;
            background-color: #9bcd9b;;
        }
          
        .container:hover .overlayBottom{
        height: 255px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="title">
    GeeksforGeeks
    </h1>
        <b>Image Overlay</b>
        <br>
        <br>
        <div class="container">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"
                class="image">
            <div class="overlay overlayBottom"></div>
        </div>
    </center>
</body>
  
</html>    

Producción:

Publicación traducida automáticamente

Artículo escrito por pbd244 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta