20Dec

Mouseover image opacity

In CategoryCSS
Byadmin

First we will write a CSS file (Save this file as “opacity.css”)

body
{
background-color: #ffffff;
}

.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 0.5;
}

.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.toggleopacity img{
border: 0px solid #ccc;
}

 Now we will write a html file (Save this file as image.html)

<html>
<head>
<title>
Image Opacity Using CSS
</title>
<link href=”opacity.css” type=”text/css” rel=”stylesheet”>
</head>
<body>
<a href=”#”>
<img src=”home2.jpg” width=”100″ height=”57″ /> <!– Use your image url here –>
</a>
</body>
</html>

Test the code and change stylesheet as per requirement.

You can download the source code from here

0 Comments   |   Read More
19Dec

Image shadows using CSS

In CategoryCSS
Byadmin

First we will write a CSS file (Save this file as “shadow.css”)

body
{
background-color: #ffffff;
}

.imgshadow {
 background-color:#999;
 border:1px solid #ccc;
 margin:0px 0px;
}

.imgshadow > img {
 margin:-4px 4px 4px -5px;
 border:1px solid #000000;
}

 Now we will write a html file (Save this file as image.html)

<html>
<head>
<title>
Image Shadow Using CSS
</title>
<link href=”shadow.css” type=”text/css” rel=”stylesheet”>
</head>
<body>
<div class=”imgshadow”>
<img src=”image.jpg” /> <!– Use your image url here –>
</div>
</body>
</html>

Test the code and change stylesheet as per requirement.

You can download the source code from here

0 Comments   |   Read More