Css code for fade in shadow effect

Its the simple example that tell you how to fade in effect occur without javascript.  There is i used simple css. But this small script increase the styling of the page.

Step 1:  Below code for the styles

<style type=’text/css’>

#photo:hover
{
padding:5px;
width:200px;
border: 1px solid #D4D3D3;
box-shadow: 2px 2px 4px #CCCCCC;
transition: all 0.3s ease-in-out 0s;
}

</style>

Step 2: Html Code

<div id=”photo”>
<img src=”http://m.ak.fbcdn.net/profile.ak/hprofile-ak-prn1/48983_100000850341898_8937_n.jpg&#8221; />
</div>

 

 

Final Code

 

<style type=”text/css”>
#photo:hover
{
padding:5px;
width:200px;
border: 1px solid #D4D3D3;
box-shadow: 2px 2px 4px #CCCCCC;
transition: all 0.3s ease-in-out 0s;
}
</style>
<div id=”photo”>
<img src=”http://m.ak.fbcdn.net/profile.ak/hprofile-ak-prn1/48983_100000850341898_8937_n.jpg&#8221; />
</div>

 

Result Page

 

 

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s