On Hover Image Card Display

INFORMATION & CODE

On Hover Image Card Display

This code provides the HTML, CSS, and JavaScript required to create an interactive "On Hover Image Card" component for a website. Visually, the code renders a centered card containing a background image, a title representing a person ("Jane Doe"), a subtitle ("Fill The Vase"), and a hidden text wrapper that lists various floral products associated with a florist.

The mechanism relies on CSS for the layout and basic styling, while JavaScript handles the dynamic interactive state. In the CSS, the card is structured using relative positioning, borders, border-radius, and box shadows to give it a neat, modern container look. The image element is styled with a background URL from Unsplash that covers the area, and it features a smooth transition duration. The JavaScript complements this by selecting the image and text wrapper elements, then listening for a mouseover event on the image. When a user hovers over the image, the JavaScript dynamically expands the width of the text wrapper and adjusts its padding, revealing the previously hidden text content underneath the image layer, and resets it when the mouse leaves.

To use this code on a webpage, you can split it into three standard files placed in the same directory: save the HTML into an index.html file, the CSS into a styles.css file, and the JavaScript into a scripts.js file. Because the HTML includes standard <link> and <script> tags pointing to these respective filenames, the browser will automatically load the styles and behavior. You can easily customize the card by replacing the Unsplash image URL in the CSS with your own image, changing the text content inside the HTML, or adjusting the dimensions within the CSS to fit your specific design needs.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>On Hover Image Card</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>On Hover Image Card</h1>
    <div class="card">
      <div class="text-wrapper">
        <h3>Florist</h3>
        <p>Bouquets</p>
        <p>Sprays</p>
        <p>Bunches</p>
        <p>Wreaths</p>
      </div>
      <div class="image">
        
      </div>
      <h2>Jane Doe</h2>
      <h4>Fill The Vase</h4>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                      * {
        box-sizing: border-box;
      }
      body {
        width: 100%;
        height: 100vh;
        padding: 10px;
        margin: 0;
      }
      h1 {
        color: #ffffff;
        font-size: 38px;
        text-align: center;
        text-shadow: 0 0 1px #000000, 2px 2px #555555;
      }
      .card {
        position: relative;
        max-width: 400px;
        height: 500px;
        margin: auto;
        padding: 10px;
        border-radius: 20px;
        box-shadow: 0 0 10px #777777, 2px 2px 10px #777777;
      }
      .image {
        position: relative;
        top: -380px;
        width: 100%;
        height: 380px;
        border: 1px solid #aaaaaa;
        border-radius: 10px;
        background-image: url("https://e-nash.net/e-nash-images/zoe-schaeffer-4uXiNNDJmUc-unsplash.jpg");
        background-size: cover;
        background-position: center;
        transition-duration: 0.5s;
        z-index: 0;
      }
      .image:hover {
        width: calc(60% - 20px);
      }
      .text-wrapper {
        position: relative;
        width: calc(50% - 50px);
        height: 380px;
        padding: 20px 0 20px 10px;
        border: 1px solid #aaaaaa;
        border-radius: 10px;
        transition-duration: 0.5s;
        overflow: hidden;
        z-index: 0;
      }
      h3, p {
        font-weight: 900;
        line-height: 2;
        text-align: center;
      }
      h2, h4 {
        position: relative;
        top: -390px;
        font-weight: 900;
        text-align: center;
      }

JAVASCRIPT


                const img = document.querySelector(".image");
const txt = document.querySelector(".text-wrapper");

img.onmouseover = function() {
  txt.style.width = 100 + "%";
  txt.style.padding = "20px 10px 20px 60%";
  img.addEventListener("mouseout", function() {
    txt.style.width = "calc(60% - 30px)";
  });
}

MENU

INFORMATION & CODE