fading image and showing text over it

[mr108]

I'm looking for is a CSS code which will fade in few images when hovered on (images are placed in a table; each image should fade individually when the mouse is hovering on it), and then show a text over that image (different text for each image).
Anyone can help?

Thanks!

[Beverleyh]

Google is a good place to start: http://www.google.com/search?q=css3+fade+in+img+text+caption&spell=1&sa=X&ei=lFTqUd_NF8Kl0wW5_YGIDg&ved=0CCcQvwUoAA&biw=320&bih=382

Have a look at some demos and tutorials and mix&match a few techniques til you get a combination you like.

When you've go something together, and if you need further help, please provide a link to your page and any source tutorials you've implemented.

[mr108]

Hi Beverleyh,

First of all thanks for your link! - it made big diffence including the right words. I did search for this but did not include the word "caption" but with your help I found just the right page I was looking for. It's here:
http://www.hongkiat.com/blog/css3-image-captions/
and the demo is here
http://demo.hongkiat.com/css3-image-captions/index.html

I modified the code for my entry page http://terrybraunstein.com/tb/ to the main site http://terrybraunstein.com/

My main problem now is what I describe in a new thread (since it's a new topic) http://www.dynamicdrive.com/forums/showthread.php?74650-code-for-links-on-buttons-and-text-on-one-page-linking-to-selection-on-portfolio-page&p=297960#post297960
but I still have few questions on this one which I tried to solve but did not manage:

Now that the rollover captions are covering the images on hover the only click-able area I managed to create is the caption text. I would like to have the whole caption box to have that link so that no matter where I click it opens the linked page.
Is that possible?

Regards,

Marek

[Beverleyh]

Looks like its just a question of changing your markup - change this;
<div id="box-6" class="box">
<a href="http://terrybraunstein.com/portfolio/">
<img id="image-6" src="images/380px-wide_Public-Art.jpg" longdesc="Assemblages on Portfolio page." alt="Assemblages on Portfolio page." width="380" height="376"/>
</a>
<span class="caption scale-caption">
<h3>Assemblages</h3><a href="http://terrybraunstein.com/portfolio/">
<p>Click to vew Assemblages on the Portfolio page.</p>
</span>
</div>

To this;
<div id="box-6" class="box">
<a href="http://terrybraunstein.com/portfolio/">
<img id="image-6" src="images/380px-wide_Public-Art.jpg" longdesc="Assemblages on Portfolio page." alt="Assemblages on Portfolio page." width="380" height="376"/>
<span class="caption scale-caption">
<h3>Assemblages</h3>
<p>Click to vew Assemblages on the Portfolio page.</p>
</span>
</a>
</div> And remove the unclosed anchor tag from the caption (grey)

[lethalmarc]

try this code...

img
{
opacity: 0.3;
}


Full source...Image Fading (http://www.corelangs.com/css/box/hover.html)

Lethal



I'm looking for is a CSS code which will fade in few images when hovered on (images are placed in a table; each image should fade individually when the mouse is hovering on it), and then show a text over that image (different text for each image).
Anyone can help?

Thanks!