Member Avatar for inni2626

Hi Everyone,

I have images in my div and i wanted when you hover on the image it gives you information about the image.How can i do that?

By the way am using dreamweaver!
Please advice :-/

<div class="gallery"><!-- Start of gallary div-->

<h3><a href="../images/Alien_Predator_Shoulder.JPG"><img src="../images/Alien_Predator_Shoulder_mini.jpg" width="63" height="69" alt="alien_predator" /></a>

<a href="../images/battle-helmut.jpg"><img src="../images/battle-helmut-mini.jpg" width="63" height="69" alt="battle_helmut" /></a>

<a href="../images/TheMummy_key.jpg"><img src="../images/TheMummy_keyMini.jpg" width="63" height="69" alt="mummy keybook" /></a>

<a href="../images/SawVI.jpg"><img src="../images/SawVI-mini.jpg" width="63" height="69" alt="saw iv" /></a><a href="../images/Scorpion_King_Swords_1.JPG"><img src="../images/Scorpion_King_Swords_1_mini.jpg" width="63" height="69" alt="Scorpion King" /></a>
</h3>
</div>
Edited by inni2626 because: n/a
  • 3 Contributors
  • 2 Replies
  • 131 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

This thread from asks how to show information when hovering images. suggested the browser tooltip and mentioned using the DOM for pop-ups and fades. Both approaches work, but they have tradeoffs: native tooltips are simple but unreliable for accessibility and mobile; DOM/JS pop-ups give full control but add complexity. A robust pattern is progressive enhancement: include real caption text in the markup, use CSS for hover/focus effects where supported, and add small JS only to handle touch or advanced toggles.

Use semantic markup (figure/figcaption or a visible caption element) so the text is in the DOM and available to screen readers. Style the caption as an absolutely positioned overlay and animate opacity/transform for a smooth fade. Make the caption appear on both :hover and :focus so keyboard users see it. Limit hover-only behavior to devices that actually support hover using a media query like this:

@media (hover: hover) and (pointer: fine) {
  .gallery .caption {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
  .gallery .item:hover .caption,
  .gallery .item:focus .caption {
    opacity: 1;
    transform: translateY(0);
  }
}

On touch devices, replace hover with a tap-to-toggle or show captions beneath images. A small JS enhancement can toggle a show-caption class on tap while preserving link behavior for images that should navigate or open a lightbox. Prefer CSS-only for large galleries to keep performance good; add JS only when necessary.

Troubleshooting tips: check z-index and overflow (parent should allow visible overlays), ensure anchors are display:block so captions align, include meaningful alt text and avoid relying solely on title, test keyboard navigation and a screen reader, and use Dreamweaver’s code view plus Live View to verify hover/focus behavior across devices.

Recommended Answers

All 2 Replies

Member Avatar for Kraai

Try this:

<a href="../images/Alien_Predator_Shoulder.JPG"><img src="../images/Alien_Predator_Shoulder_mini.jpg" width="63" height="69" alt="alien_predator" title="Alien Predator"/></a>
Member Avatar for ko ko

Simply show the small info of image such as the file name by following Kraai way. Use Javascript DOM for create more visual effects. For example, when the user hover the image, the description of the image appears with pop-up layer. And you can add more effect like fade-in/out as you can do. Now, we are in HTML forum and I don't have to talk about this anymore. You can learn about DOM in the javascript forum.
Hope this help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.