Youtube like Image overlapping

[pascualito]

Hi, I'm new in css and I'd like to know how can I do something like this. Plese watch the image

http://img5.xooimage.com/files/7/8/4/youtube-7dc1d4.gif

Over all thumbnails appear a "plus" sign, and it contains a link to diferent location than the main thumbnail

I think is about overlaping images. The plus sign over the thumbnail but I don't know an css way of doing it :(:(

Can you suggest me something


Thanks a lot in advance ;);)

[Schmoopy]

For overlapping images, the main thing you'll want to use is z-index, it's set to 0 as default for all elements, so if you wanted to overlap two images you could do it like so:

CSS:


.overlap{
z-index:1;
position:relative;
left:-65px;
top:-20px;
border:none;
}

.overlap:hover{
opacity:0.85;
-moz-opacity:0.85;
-khtml-opacity:0.85;
}

You can leave out the transparency if you want (doesn't work in IE), but that is basically how it would work, then this would be the HTML:


<img src="images/image1.jpg">
<a href="#">
<img class="overlap" src="images/overlap.gif">
</a>


Hope this helps, there are probably other ways to do this, and you'll need to modify the positioning to suit your images size.

Jack.

[pascualito]

Your example worked right. It solves my problem

Thanks a lot for your answer

Cheers