Transform the text upon hovering over the image, with the text positioned separate from the image

Question

Transform the text upon hovering over the image, with the text positioned separate from the image

I'm looking for a solution where hovering over images in a grid area will change the text on the left side of the screen to display a predefined description of that image. I've been working on this problem for hours and would appreciate any help.

The goal is to have the text displayed in the same area. For example, when hovering over a lake image, the description of the lake should be displayed in a designated box. Similarly, if hovering over a duck image, the description of the duck should replace the previous one in the same box.

Is there a way to use onmouseover events in order to dynamically change the text based on what is being hovered over? For instance, when a duck image is hovered over, the text variable "DuckImage = 'A duck is an animal';" should be displayed in a designated box.

html css

Answer 1

Answer №1

If you're looking to create a grid of images with text that appears on hover, you can achieve this using CSS and HTML without the need for JavaScript. Here's how it works:

.grid {
  /* Set padding to create space for descriptions */
  padding-left:50%;
  
  /* Create a basic grid layout for the images */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.grid img {
  /* Ensure images stay within their grid cells */
  max-width:100%;
}

.grid a p {
  /* Limit description width to half of the screen */
  width:50%;
  
  /* Fixed position for top left corner */
  position:fixed;
  top:0;
  left:0;
  
  /* Hide description by default */
  display:none;
}

.grid a:hover p {

  /* Show description on hover */
  display:block;
}

<div class="wrapper">

  <div class="grid">
    <a href="#">
      <p>Predefined text for blue image</p>
      <img src="https://via.placeholder.com/350/00f.png" alt="blue" />
    </a>
    <a href="#">
      <p>Predefined text for red image</p>
      <img src="https://via.placeholder.com/350/f00.png" alt="red" />
    </a>
    <a href="#">
      <p>Predefined text for green image</p>
      <img src="https://via.placeholder.com/350/0f0.png" alt="green" />
    </a>
    <a href="#">
      <p>Predefined text for yellow image. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <img src="https://via.placeholder.com/350/ff0.png" alt="yellow" />
    </a>
  </div>
</div>

Answer 2

If you're looking to create a grid of images with text that appears on hover, you can achieve this using CSS and HTML without the need for JavaScript. Here's how it works:

.grid {
  /* Set padding to create space for descriptions */
  padding-left:50%;
  
  /* Create a basic grid layout for the images */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.grid img {
  /* Ensure images stay within their grid cells */
  max-width:100%;
}

.grid a p {
  /* Limit description width to half of the screen */
  width:50%;
  
  /* Fixed position for top left corner */
  position:fixed;
  top:0;
  left:0;
  
  /* Hide description by default */
  display:none;
}

.grid a:hover p {

  /* Show description on hover */
  display:block;
}

<div class="wrapper">

  <div class="grid">
    <a href="#">
      <p>Predefined text for blue image</p>
      <img src="https://via.placeholder.com/350/00f.png" alt="blue" />
    </a>
    <a href="#">
      <p>Predefined text for red image</p>
      <img src="https://via.placeholder.com/350/f00.png" alt="red" />
    </a>
    <a href="#">
      <p>Predefined text for green image</p>
      <img src="https://via.placeholder.com/350/0f0.png" alt="green" />
    </a>
    <a href="#">
      <p>Predefined text for yellow image. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <img src="https://via.placeholder.com/350/ff0.png" alt="yellow" />
    </a>
  </div>
</div>

Answer 3

Answer №2

To achieve this, one method could involve placing the grid and message container within a parent container and utilizing the general sibling selector. The example provided below may not be perfect, but it does function. Another approach would be to utilize JavaScript by employing onmouseover for the grid cells and potentially using data attributes to enhance dynamism:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        ...
        // CSS styling here
        ...
    </head>
    <body>

       <div class="grid-area">
         // Grid items here
       </div>

</body>
</html>

The following example utilizes JavaScript. This is one potential method that can be implemented. Data attributes have been utilized to allow for customization with values and style adjustments in CSS. Alternatively, you could also use setAttribute('data', "your attribute name", ...) along with other techniques:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    ...
    // Additional CSS styling
    ...
</head>
<body>
    <div class="center">
        // Image elements with data-columns attributes
    </div>
     <div id="outside-box"></div>
<script>
    // JavaScript logic to interact with the images
</script>
</body>
</html>

Answer 4

To achieve this, one method could involve placing the grid and message container within a parent container and utilizing the general sibling selector. The example provided below may not be perfect, but it does function. Another approach would be to utilize JavaScript by employing onmouseover for the grid cells and potentially using data attributes to enhance dynamism:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        ...
        // CSS styling here
        ...
    </head>
    <body>

       <div class="grid-area">
         // Grid items here
       </div>

</body>
</html>

The following example utilizes JavaScript. This is one potential method that can be implemented. Data attributes have been utilized to allow for customization with values and style adjustments in CSS. Alternatively, you could also use setAttribute('data', "your attribute name", ...) along with other techniques:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    ...
    // Additional CSS styling
    ...
</head>
<body>
    <div class="center">
        // Image elements with data-columns attributes
    </div>
     <div id="outside-box"></div>
<script>
    // JavaScript logic to interact with the images
</script>
</body>
</html>

Answer 5

Answer №3

<img src="Images/duck.png" width="450" height="auto" onmouseover="document.getElementsByName('HoverOverInfo2')[0].innerHTML = 'A Duck'" onmouseout="document.getElementsByName('HoverOverInfo2')[0].innerHTML = ' '" />

    <img src="Images/car.png" width="450" height="auto" onmouseover="document.getElementsByName('HoverOverInfo2')[0].innerHTML = 'A Car'" onmouseout="document.getElementsByName('HoverOverInfo2')[0].innerHTML = ' '" />

Another location

<h4 class="w3-bar-item"><b>Description</b></h4>
    <div style="margin-left:8px">
   <p id="HoverOverInfo" name=></p>

This solution was spot-on for my needs!

Answer 6

<img src="Images/duck.png" width="450" height="auto" onmouseover="document.getElementsByName('HoverOverInfo2')[0].innerHTML = 'A Duck'" onmouseout="document.getElementsByName('HoverOverInfo2')[0].innerHTML = ' '" />

    <img src="Images/car.png" width="450" height="auto" onmouseover="document.getElementsByName('HoverOverInfo2')[0].innerHTML = 'A Car'" onmouseout="document.getElementsByName('HoverOverInfo2')[0].innerHTML = ' '" />

Another location

<h4 class="w3-bar-item"><b>Description</b></h4>
    <div style="margin-left:8px">
   <p id="HoverOverInfo" name=></p>

This solution was spot-on for my needs!

Transform the text upon hovering over the image, with the text positioned separate from the image

Answer №1

Answer №2

Answer №3

Similar questions

"Within the node.js framework, the search/query section of the URL appears

Eliminate spaces between divs without any margins or padding

Pop-up message on card selection using JavaScript, CSS, and PHP

Is it possible to modify the dropdown menu so that it opens on the right side instead of using a select tag?

What is the correct way to run javascript on a DOM element when ng-show is triggered?

Use custom styles or CSS for the file input element: <input type="file">

Prevent selecting dates on <input type="datetime-local"> fields

Adding a uniform header and footer across all pages simultaneously in HTML

Limit selection choices in select element

Is there a way to keep my fixed footer container from moving while zooming in and out on a webpage

Assistance Needed with XPATH and CSS for Selenium Automation

Transforming a dynamic HTML layout into a non-responsive one: "RESPONSIVE NO MORE"

Shifting hues of dots within a grid according to the passing of time

Adjust the border color of a TextField in react/material ui based on whether props are required

A glitch occurred while attempting to load content dynamically onto an HTML page using Ajax

Generate a blank image using the canvas.toDataURL() method

Serialize a series of select boxes to optimize for AJAX POST requests

Adjust the size of the <textarea> to match the height of the table cell

Drawing on Canvas with Html5, shifting canvas results in significant issues

The DataGrids effortlessly expanded to accommodate their parents without the need for a horizontal scrollbar, showcasing their full capacity