Member Avatar for Yoshi CLONE

Hey guys, I'm stumped. I was wondering if any of you know a script so that when you rollover any image, a body of text will appear above it. An example would be here.

Roll over the image buttons, and it will say a rating. Ofcourse, they could put any text there, not just a rating. Do you guys have any ideas?

Thanks, Yoshi CLONE.

  • 3 Contributors
  • 8 Replies
  • 264 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #46692

Dani AI

Generated

A compact, reliable pattern is to wrap each image in a relatively positioned container and place an absolutely positioned caption above it that is revealed with CSS on :hover and :focus. This keeps everything client-side (so PHP pages aren’t the problem unless the server-side output is malformed), and it combines ’s tooltip idea with ’s toggle suggestion while improving it by using opacity/transform instead of display (which prevents smooth transitions).

Example (HTML + CSS):

<a href="#" class="thumb" tabindex="0">
  <img src="button.png" alt="Affiliate logo">
  <span class="caption">Rating: 9/10</span>
</a>

.thumb { position: relative; display: inline-block; }
.thumb img { display: block; }
.thumb .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 6px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 6px 8px;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 20;
}
.thumb:hover .caption,
.thumb:focus .caption { opacity: 1; transform: translateY(0); pointer-events: auto; }

Quick troubleshooting for “I see a block but no text” (likely causes seen in practice):

  • The caption element exists but its text is empty (check page source / inspector).
  • The caption’s color/opacity/font-size/line-height make text invisible (e.g., color matches background, opacity:0, or font-size:0).
  • A CSS rule elsewhere is overriding visibility (specificity issue).
  • The parent has overflow:hidden or a low z-index, clipping or hiding the caption.
  • If the design uses content:attr(...) on a pseudo-element, the referenced attribute might be missing.

Notes: include :focus for keyboard users and aria-describedby or meaningful alt text for screen readers. Hover-only UI won’t work reliably on touch devices — use tap-to-toggle or always-visible captions on small screens.

Recommended Answers

All 8 Replies

Member Avatar for Member #46692

I'd say use a simple tool tip instead.

But perhaps this is what you are after?

Member Avatar for Yoshi CLONE

Doesn't seem to work. Could it be because I'm using php pages?

Member Avatar for Member #46692

Erm, what doesn't work, the examples in the link?

It works for me?

Member Avatar for tgreer

I would use a script that toggles a CSS style, from "display:none" to "display:inline", for example.

Member Avatar for Yoshi CLONE

Erm, what doesn't work, the examples in the link?

It works for me?

I do it. And you see a block above it, but no text. :/

Member Avatar for Member #46692

Nope I followed the instructions in that link and it worked perfectly.

So it must be you. :cheesy:

Member Avatar for Yoshi CLONE

XD Do you have AIM or something so maybe you could help me out? :P

Member Avatar for Member #46692

XD Do you have AIM or something so maybe you could help me out? :P

What is the problem? The instructions in that link I provided, is about as simple as it gets. No offence but if you can't follow that I'd give up web design.

commented: that was a pretty rude/negative comment. +0
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.