CODEWITHSUNDEEP
htmlcss
LightM1
LightM1

Reputation: 105

Don't understand how to show the caption when hovering image

I'm having some difficulty with this example:

<img src="image1/<?php echo $file; ?>.jpg" style="width:500px" /> 
<p id="caption"><?php echo $caption; ?></p>

I'm trying to get the caption with CSS when hovering the image.

I tried to use a img{hover;} and p {hover;}.

Is there a way for me to get the caption when hovering the image? The example is in PHP and if it was in CSS or Javascript maybe I could search for it, but so far I can't find a solution for this.

I appreciate any explanation & examples.

Upvotes: 1

Views: 1951

Answers (4)

ametren
ametren

Reputation: 2246

You want img:hover {/* css */}

Actually, you probably want to do something like this: 

<div class="hoverme">
  <img src="image1/<?php echo $file; ?>.jpg" style="width:500px" /> 
  <span><?php echo $caption; ?></span> 
</div>

and then in your CSS: 

div.hoverme span{
    display: none;
}

div.hoverme:hover span{
    display: block;
}

Upvotes: 2

Mike Todd
Mike Todd

Reputation: 7377

Try using JavaScript events onMouseOver and onMouseOut to show/hide the caption, something like this:

<img src="image.jpg" style="width:500px"
    onMouseOver="document.getElementById('caption').style.display='block'"
    onMouseOut="document.getElementById('caption').style.display='none'" />
<p id="caption" style="display:none">Caption here</p>

Upvotes: 0

kapa
kapa

Reputation: 78671

/* by default, hide caption: */
#caption { display: none; } 
/* if caption is next to a hovered img, show: */
img:hover + #caption { display: block; }

jsFiddle Demo

  • + is the Adjacent Sibling Selector, supported from IE8.
  • :hover pseudoclass is used to style elements the mouse goes over
  • Note that if you want to use more than one caption in your document, you should use a class instead of an id. Ids must be unique in the document.

If you need something that works in IE7, consider HTML like this:

<div class="image-with-caption">
    <img src="whatever.png" style="width:200px" /> 
    <p class="caption">caption</p> 
</div>

And the CSS would be:

.caption { display: none; }
.image-with-caption:hover .caption { display: block; }​

​jsFiddle Demo

Upvotes: 4

David Thomas
David Thomas

Reputation: 253318

To affect the style of the p while hovering over the img:

img:hover + #caption {
    display: block; /* or whatever...*/
}

Or:

img:hover ~ #caption {
    display: block; /* or whatever... */
}

It's worth noting that these examples assume that you have only one p element with an id of 'caption,' if you have multiple p elements with that id, then you need to use a class instead, as an id must be unique within the document.

The + is the CSS adjacent-sibling combinator, and selects the #caption that immediately follows the img over which the user is hovering.

The ~ is the CSS general-sibling combinator, and selects any sibling #caption element that is a later-sibling of the img which is hovered; regardless of any elements that might appear in between (though they do have to be siblings within the same parent element).

Reference:

Upvotes: 2

Related Questions