trying to show image and text when you hover over a graphical element

Question

I'm trying to show the image, but its not showing and there should be text with the image. I think I need to add some sort of sizing to the image, but still unsure. The graphic is currently just a square but it'll be a dot on a timeline showing significant events, so when hovering over the dot on the timeline an image and text next to it would show the event people want to look at. I found this code on CodePen showing how to hover text, but I tried adding the image but its not showing. I'm new to coding so please be gentle. :)

Edit: So im coding a wedding website and I want to put a "our Story" section, in the section ill have a timeline running down the page and on the line of the timeline would be dots to indicate a significant event that happened. Im trying to get so that an image and text would pop out once someone hovers over these dots.

 .reference { position: relative; background: tomato; width: 100px; height: 100px; }.popout-menu { position: absolute; visibility: hidden; left: 100%; background: #333; color: white; padding: 15px; }.reference:hover>.popout-menu, .reference:focus>.popout-menu, .reference:focus-within>.popout-menu { visibility: visible; }.popoutimg { width: auto; }

 <div class="reference" tabindex="0"> <div class="popout-menu"> <img src="https://via.placeholder.com/100" alt="" class="popoutimg"> </div> </div>

Answer 1

Seems like you can just add your text inside the popout-menu div. It should show below your image inside the popup:

 .reference { position: relative; background: tomato; width: 100px; height: 100px; }.popout-menu { position: absolute; visibility: hidden; left: 100%; background: #333; color: white; padding: 15px; }.reference:hover>.popout-menu, .reference:focus>.popout-menu, .reference:focus-within>.popout-menu { visibility: visible; }.popoutimg { width: auto; }

 <div class="reference" tabindex="0"> <div class="popout-menu"> <img src="https://via.placeholder.com/100" alt="" class="popoutimg" /> <div>Your text here</div> </div> </div>