¿Cómo crear un icono de superposición de imagen usando HTML y CSS?

El ícono de superposición de imagen puede ser una adición impresionante a los detalles interactivos o un conjunto de funciones para su sitio web. El contenido de este artículo dividirá la tarea en dos secciones, la primera sección creará la estructura y adjuntará el enlace para el icono. En la segunda sección, diseñaremos la estructura usando CSS.

Creación de estructura: en esta sección, crearemos una estructura básica y también adjuntaremos el enlace CDN de Font-Awesome para los íconos que se usarán como un ícono al pasar el mouse.

Enlaces CDN para los iconos de Font Awesome:

<enlace rel=”hoja de estilo” href= “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

Código HTML:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Image Overlay Icon using HTML and CSS 
    </title>
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <b>Image Overlay Icon using HTML and CSS</b>
        <div class="img">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
                 alt="Geeksforgeeks">
            <div class="overlay">
                <a href="#" class="icon">
                   <i class="fa fa-user"></i>
                </a>
            </div>
        </div>
    </div>
</body>
  
</html>

Estructura de diseño: en la sección anterior, hemos creado la estructura del sitio web básico donde vamos a utilizar como un icono de superposición de imagen. En esta sección, diseñaremos la estructura para el icono de superposición de imágenes.

Código CSS:

<style>
    body {
        text-align: center;
    }
      
    h1 {
        color: green;
    }
      
    /* Image styling */
    img {
        padding: 5px;
        height: 225px;
        width: 225px;
        border: 2px solid gray;
        box-shadow: 2px 4px #888888;
          
    }
      
    /* Overlay styling */
    .overlay {
        position: absolute;
        top: 23.5%;
        left: 32.8%;
        transition: .3s ease;
        background-color: gray;
        width: 225px;
        height: 225px;
        opacity: 0;
 
    }
      
    /* Overlay hover */
    .container:hover .overlay {
        opacity: 1;
    }
      
    /* Icon styling */
    .icon {
        color: white;
        font-size: 92px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
</style>

Solución final: este es el código final después de combinar las dos secciones anteriores. Mostrará el icono de superposición de imagen.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Image Overlay Icon using HTML and CSS 
    </title>
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
          
        /* Image styling */
        img {
            padding: 5px;
            height: 225px;
            width: 225px;
            border: 2px solid gray;
            box-shadow: 2px 4px #888888;
        }
          
        /* Overlay styling */
        .overlay {
            position: absolute;
            top: 23.5%;
            left: 32.8%;
            transition: .3s ease;
            background-color: gray;
            width: 225px;
            height: 225px;
            opacity: 0;
        }
          
        /* Overlay hover */
        .container:hover .overlay {
            opacity: 1;
        }
          
        /* Icon styling */
        .icon {
            color: white;
            font-size: 92px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <b>Image Overlay Icon using HTML and CSS</b>
        <div class="img">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
                 alt="Geeksforgeeks">
            <div class="overlay">
                <a href="#" class="icon">
                   <i class="fa fa-user"></i>
                </a>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta