transparent image on top of using the model

Hello Adboe SW forum. I would like to create an effect like the following link: http://www.joomlademos.de/home?template=pizza

Where if you click on the image of the pizza guy, you will notice that the image is placed on top of the layout pattern design. I can't understand how to achieve such a cool concept. is - this is css? If anyone can help in pointing me in the right direction?

I guess the first task would be to make a transparent .png file, then find a script or code to apply it to my site. Thanks in advance for your comments and suggestions. Have a great day.

edit------------------------------------------------------------------------

I found a way that works, however I have a lttle glitch. The overlay image moves from left to right depedning on the width of the browser window. Is it possible to anchor the image to stay left brim edge of model and not window? I'm using the following code for the css:

position: absolute;
z index: 55;
Top: 0px;
left: 5%;
Width: 348px;
height: 262px;
background-image: url('images/aaa-logo.png');
background-repeat: no-repeat;

You can place the AP div in a relatively positioned Div so that the AP div is relative to the outer div.

If you look at the styles for the div that surrounds the peak div, you can see that he has a position of parent:

.art-sheet
{
position: relative;
z-index: 0;
Auto margin: 0;
Width: 1000px;
min-width: 55px;
min-height: 55px;
}

and for the pic AP div styles give the coordinates from the div. art sheet

.PIC
{
position: absolute;
z index: 55;
top:-199px;
left: 500px;
Width: 348px;
height: 262px;
background-image: url('.. / images/pic.png');
background-repeat: no-repeat;
}

Tags: Dreamweaver

Similar Questions

Maybe you are looking for