Show Image with Fade Background

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;
	-moz-opacity: 0.8;
	filter: alpha(opacity=80);
#new_window	.content{
	display: none;
	left: 458px;
	top: 50px;
	width: 350px;
	height: 200px;
	border: 2px solid;
	background-color: white;

The HTML code:

<input onclick="document.getElementById('content').style.display='block'; document.getElementById('background').style.display='block'" type="button" value="press me" /></pre>
<div id="new_window">
<div id="content" class="content" style="display: none;">your image here</div>

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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: