noobie image collage

[cway]

I'm working on an image collage and I wonder if anybody has any ideas how I get a text box to appear over an image.
Here's my css.
And I don't really know if what I've built so far is good programming.
Thanks!
Cway

[chrishirst]

Set the image as a background to a fixed size element, put the text in the element

[cway]

Thanks for the response!
I'm sorry. I should have explained a little more. I want a text box to appear when you mouse over an image. It would also be keen if the box with the text in it was centered vertically and horizontally to the image. Each image would have their own mouse-over text box.

[MinatureCookie]

Just using CSS? I'd really go with Javascript for niceness, but here's how I'd do it just using CSS.

HTML:

<img src="image.png" alt="Image" class="img" />
<div class="imgText">Blah blah</div>

CSS:

.imgText, img{
width: 500px;
height: 200px;
}
.imgText{
position: absolute;
margin-top: -200px;
text-align: center;
opacity: 0;
filter: alpha(opacity = 0);
}
.imgText:hover{
opacity: 1;
filter: alpha(opacity = 100);
}

I haven't tested that code, so let me know if there are glitches in it... Should work though. As for centering vertically, there aren't really any nice ways to do it... If you really want it done though, I can link you to some ways... None are good, though.

Also, note that those widths and heights are made up... Put in the actual image width and height, and the margin-top is the image height * -1

[meesa]

I'd really go with Javascript for niceness

It's typically better to go with CSS, reason being that Javascript can be turned off.

[MinatureCookie]

Originally Posted by meesa

It's typically better to go with CSS, reason being that Javascript can be turned off.

Sorry, I meant 'niceness' as in flashy effects and whatnot. But yeah, definitely better to go with CSS as at least backup if JS is disabled.

[chrishirst]

<div class="imgbox">
    <img .... />
    <span>Text</span>
</div>

.imgbox {
    position:relative;
}
.imgbox span {
     position:absolute;
     visibility:hidden;
}
.imgbox:hover span {
     visibility:visible;    
     z-index:20;
}
.imgbox:hover img{
     z-index:10;
}

Quick bit of code for a disjointed rollover.
(keyboard code not tested )

[cway]

Thanks to everyone who's responded! Very much appreciated!

I've implemented some of the changes here
CSS here.

I assume to get the same mouse-over to work, I'll simply duplicate this code and change the div:

.kit
{
	position: relative;
	border: 2px black solid;
	width: 344px;
	height: 238px;
}
.kit span
{
	position: absolute;
	visibility: hidden;
	top: 10px;
	left: 10px;
	background-image: url(graphics/80white.png);
	padding: 4px;
	width: 300px;
}
.kit:hover span
{
	visibility: visible;
	z-index: 20;
}
.kit:hover img
{
	z-index: 10;
}

I've made some adjustments so the text would appear on top of the image and with a background png. I also added a border and some padding. But now there's two borders - the default blue border and my black border.

Does anybody have any suggestions on how I remove the blue border?

Thanks!
Cway

[MinatureCookie]

a img{
  border-width: 0;
}

I think - if it's a border because you've added a link

[rkrause]

the default blue border on all images is removed by adding the following css style.

img {border:none;}