Blog > detail

Just my tiny mind

Show Image with Fade Background

26-2-2012 Admin General 2 Comments

Show Image with Fade Background

Image is one of most common element in a website that very important. Just imagine, how do you feel if u visit a website that has no image, or the image is not managed well. You will immidiately feel bored. There is many things you can do to manage image in website, and one of them i will explain bellow.


In this case, I will try to explain how to make a Show Image with Fade Background. What u need is some basic knowledge of HTML and CSS.


The CSS code:


#new_window .background{

display: none;

position:fixed ;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: black;

z-index:1001;

-moz-opacity: 0.8;

opacity:.70;

filter: alpha(opacity=80);

text-align:center;

}

#new_window .content{

display: none;

position:absolute;

text-align:center;

z-index:1002;

left: 458px;

top: 50px;

width: 350px;

height: 200px;

border: 2px solid;

border-color:#CCCCCC;

background-color: white;

}


The HTML code:



In this case, the code will show a button. Then if you press the button, the code will show your image. And you can close the image by clicking the grey area outside the image.


Copy the code above and paste it into your HTML page. Little bit modification and you just made your own Show Image with Fade Background.


Good Luck.

Show Image with Fade Background Show Image with Fade Background Show Image with Fade Background

Show Image with Fade Background Show Image with Fade Background Show Image with Fade Background

Show Image with Fade Background

Show Image with Fade Background

Show Image with Fade Background

Show Image with Fade Background

word word