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+...iw=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/s...960#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

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!