Display Image While Hovering Over Text

Hello everyone,

I'm wondering if there is any code that would allow an image (preferably .jpg or .png file formats) to be displayed when text is hovered over? I have found a few different tutorials online but none of them seem to work properly when I put them into a post. If possible, I would also like to dictate what size the displayed image appears as as well.

Thank you all in advance.

Forum Link --> https://yugiohduelacademia.forumotion.com/
Forum Version --> ModernBB

Good evening!

Can you provide an example?
In any case, we won't be able to set a specific kind of extension for images - they will need to be uploaded to the hosting.

is this for category or forum description? meaning the text of the description when hovering will show an image

or is this when you post a comment ?

This would specifically be for when a post is made.

For example, in this post I've made here, when I hover over the names of cards, I'd like for an image of the card to be displayed.

For example, if I were to hover over 'Archnemeses Protos', I'd like for this image to be displayed...

i know you can do it in an HTML page but in a post maybe you can archive this with a javascript

1) AP - General - Messages and emails - Configuration - Allow HTML - Yes - Save.

2) AP - Display - Templates - General - viewtopic_body

At the end of the template, insert the code:

Code:

  <script>
 
  window.addEventListener('load', function() {
  const listOfSpecialText = document.querySelectorAll('.hover_span');
  const listOfSpecialTitle = document.querySelectorAll('.hover_div');
  const allPosts = document.querySelectorAll('div.content');
  if (listOfSpecialText) {
    listOfSpecialText.forEach((item, index) => {
      item.addEventListener('mouseover', function() {
        listOfSpecialTitle[index].classList.add('active');
      });
    });
    listOfSpecialText.forEach((item, index) => {
      item.addEventListener('mouseout', function() {
        listOfSpecialTitle[index].classList.remove('active');
      });
    });
    allPosts.forEach((item) => {
      const brElements = item.querySelectorAll('br');
      if (brElements) {
        brElements.forEach((brElement) => {
          const pElement = document.createElement('p');
          brElement.parentNode.insertBefore(pElement, brElement);
          brElement.parentNode.removeChild(brElement);
        });
      }
    });
  }
  });
</script>

Save. Publish.

3) AP - Display - Colors & CSS - CSS Stylesheet

Add this code:

Code:

.hover_div {
  display: none;
}

.hover_div {
  display: none;
}

.hover_div.active {
  display: block;
  position: absolute;
  max-width: 150px;
  max-height: 150px;
  left: 0;
}

.hover_span {
  position: relative;
  display: inline-block;
}

.hover_span {
  position: relative;
  display: inline-block;
}

Save.

Code: max-width: 150px;

and

Code: max-height: 150px;

- maximum image sizes

For example, the text of the message:

Code:

<span class='hover_span'>[color=#FF0000]you avatar[/color]
<div class='hover_div'><img src="LINK IMAGE" /></div></span> dfdfdfdfdfdfdfdfdfdfddfdfdfdfdfdfdfdfdfdfd
[right]<span class='hover_span'>another avatar
<div class='hover_div'><img src="LINK IMAGE" /></div></span>[/right]

you avatar and another avatar - text, on hovering over which the picture will appear
LINK IMAGE - links to relevant images

Result:

</br>

Razor12345 wrote:

Code: max-width: 150px;

and

Code: max-height: 150px;

- maximum image sizes

@Razor12345 I increased the maximum size of the image within in the CSS but in the post it is displaying as super tiny. Is there anyway I can fix this to display as the maximum image size?

Replace this code:

Code:

.hover_div.active {
  display: block;
  position: absolute;
  max-width: 150px;
  max-height: 150px;
  left: 0;
}

by this

Code:

.hover_div.active {
  display: block;
  position: absolute;
  left: 0;
  width: 400px
  height: 400px;
  z-index: 10;
}

This code is responsible for the size of the shell in which the image resides.

And add this code:

Code:

.hover_div.active img {
  width: 350px;
  height: 350px;
}

This code is responsible for the size of the images

Result:

Okee that worked. Thank you so much, @Razor12345

You are welcome!

Problem solved & topic archived. Please read our forum rules: ESF General Rules