Tarjeta receptiva con efecto de desplazamiento usando HTML y CSS

Las tarjetas son una parte muy importante para cualquier sitio web. Se utiliza para mostrar información importante en breve a los espectadores. Entonces, en este artículo crearemos una tarjeta receptiva con un increíble efecto de desplazamiento usando HTML y CSS. Al usar HTML , diseñaremos la estructura básica de la tarjeta y luego, al usar las propiedades de CSS , podemos crear el efecto de animación flotante.

Se proporciona un gif de muestra para comprender la tarea de hoy con más claridad.

Implementación paso a paso:

Paso 1: Primero, vaya a Internet y descargue una imagen para la tarjeta y guárdela en la carpeta de imágenes . Usaremos esta imagen más adelante durante la implementación.

Paso 2: Ahora, diseñaremos una estructura de tarjeta simple en HTML . Los comentarios ya están en código para su ayuda.

HTML

<!DOCTYPE html>
<html>
 
 
<body>
 
    <!--creating a class container which will hold card class and again card will hold imgbox class-->
    <div class="container">
 
        <div class="card">
 
            <div class="imgbox">
 
                <!--extracting image named gfg.jpg from images folder-->
                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20210215170112/geek2-200x200.jpg">
 
            </div>
 
            <div class="content">
 
                <!--heading of the card-->
                <h1>GFG</h1>
 
                <!--content of the card-->
                 
 
 
<p>
                    A Computer Science portal for geeks.
                   It contains well written, well thought and well
                   explained computer science and programming articles, quizzes.
                </p>
 
 
 
            </div>
        </div>
    </div>
 
</body>
 
</html>

Paso 3: A continuación, usaremos algunas propiedades de CSS para diseñar la tarjeta y usaremos la clase de desplazamiento para obtener el efecto de animación cuando pasemos el mouse sobre la tarjeta.

HTML

* {
      padding: 0;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
  }
  /*Apply css properties to body*/
   
  body {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: gray;
  }
  /*Apply css properties to container class*/
   
  .container {
      position: relative;
      width: 1000px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      padding: 35px;
  }
  /*Apply css properties to card class*/
   
  .container .card {
      height: 220px;
      max-width: 200px;
      position: relative;
      margin: 30px 10px;
      padding: 20px 15px;
      background: wheat;
      display: flex;
      flex-direction: column;
      box-shadow: 0 5px 202px black;
      transition: 0.3s ease-in-out;
  }
  /*Apply css properties to card class when it get pointed by cursor*/
   
  .container .card:hover {
      height: 420px;
  }
  /*Apply css properties to imgbox class*/
   
  .containe .card .imgbox {
      position: relative;
      width: 260px;
      height: 260px;
      top: -60px;
      left: 20px;
  }
  /*Apply css properties to img tag*/
   
  .container .card .imgbox img {
      max-width: 100%;
      border-radius: 4px;
  }
  /*Apply css properties to content class*/
   
  .container .card .content {
      position: relative;
      margin-top: -100px;
      padding: 10px 15px;
      text-align: center;
      color: #111;
      visibility: hidden;
      opacity: 0;
      transition: 0.3s ease-in-out;
  }
  /*Apply css properties to content when card gets hovered*/
   
  .container .card:hover .content {
      visibility: visible;
      opacity: 1;
      margin-top: -10px;
      transition-delay: 0.3s;
  }
  /* Css part completed*/

Código completo: en esta sección, combinaremos las tres secciones anteriores para crear una tarjeta flotante usando HTML y CSS.

HTML

<!DOCTYPE html>
<html>
 
<head>
 
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        /*apply css properties to body*/
         
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: gray;
        }
        /*apply css properties to container class*/
         
        .container {
            position: relative;
            width: 1000px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            padding: 35px;
        }
        /*apply css properties to card class*/
         
        .container .card {
            height: 220px;
            max-width: 200px;
            position: relative;
            margin: 30px 10px;
            padding: 20px 15px;
            background: wheat;
            display: flex;
            flex-direction: column;
            box-shadow: 0 5px 202px black;
            transition: 0.3s ease-in-out;
        }
        /*apply css properties to card class when it get pointed by cursor*/
         
        .container .card:hover {
            height: 420px;
        }
        /*apply css properties to imgbox class*/
         
        .containe .card .imgbox {
            position: relative;
            width: 260px;
            height: 260px;
            top: -60px;
            left: 20px;
        }
        /*apply css properties to img tag*/
         
        .container .card .imgbox img {
            max-width: 100%;
            border-radius: 4px;
        }
        /*apply css properties to content class*/
         
        .container .card .content {
            position: relative;
            margin-top: -100px;
            padding: 10px 15px;
            text-align: center;
            color: #111;
            visibility: hidden;
            opacity: 0;
            transition: 0.3s ease-in-out;
        }
        /*apply css properties to content when card gets hovered*/
         
        .container .card:hover .content {
            visibility: visible;
            opacity: 1;
            margin-top: -10px;
            transition-delay: 0.3s;
        }
        /* css part completed*/
    </style>
 
</head>
 
<body>
 
    <!--creating a class container which will hold card class and again card will hold imgbox class-->
    <div class="container">
 
        <div class="card">
 
            <div class="imgbox">
 
                <!--extracting image named gfg.jpg from images folder-->
                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20210215170112/geek2-200x200.jpg">
 
            </div>
 
            <div class="content">
 
                <!--heading of the card-->
                <h1>GFG</h1>
 
                <!--content of the card-->
                 
 
 
<p>
                    A Computer Science portal for geeks.
                    It contains well written, well thought and well explained
                    computer science and programming articles, quizzes.
                </p>
 
 
 
            </div>
        </div>
    </div>
 
</body>
 
</html>

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *