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

Convert JavaScript code to Google Appscript

Utilizing property validation in your codebase

Why is a question mark added to the URL when the login button is clicked

Guide to placing the Drawer component beneath the AppBar in Material-UI

Using Vue and vue-multiselect to create interactive options based on the selected language

Retain the chosen values even after submitting the form

AngularJS has the ability to handle the value of one input based on the value of another input

Is Amazon altering the names of their CSS selectors and HTML elements on the fly?

Filling a table cell with a div that spans 100% height

What is causing Firefox to display an additional line in this section?

Issue with $_SERVER['PHP_SELF'] not functioning properly

"Enhance your website with a unique Bootstrap 5 carousel featuring multiple

Showing a confirmation message to the user upon clicking outside of a specific section

Is it possible for ng-model to verify its own value?

What is the best way to implement a CSS transition for styles that are dynamically created by React?

Overflow due to cascading style sheets

`CSS Animation fails to run in Internet Explorer and Microsoft Edge browsers`

Is it possible in Javascript to trace the origins of a particular element's property inheritance for debugging purposes?

How to place a Div element in the middle of a webpage

Angular causes HTML Dropdown to vanish once a null value is assigned