This post helps you to create shadow effect to particular image using css3 code. This is very simple method to create this effect and also it will highlight the user hover the image, this effect also one of the commenly used one. The below css code helps you to create shadow, Add the class to the image and write the css code for class hover as a below
.shadow:hover
{
box-shadow: 10px 10px 30px 5px #aaa;
}
Here you have the demo page you can also check the demo page how it works perfectly. I hope this simple box shadow effect is very useful.
.shadow:hover
{
box-shadow: 10px 10px 30px 5px #aaa;
}
Here you have the demo page you can also check the demo page how it works perfectly. I hope this simple box shadow effect is very useful.
code for simple shadow effect on hover
<html>
<head>
<title>Simple shadow Effect on hover image</title>
<style>
.shadow:hover
{
box-shadow:10px 10px 30px 5px #aaa;
}
</style>
</head>
<body>
<img src="shadow-effect-css.jpg" alt="shadow-effect-on-hover-image" style="width:450px;" class="shadow">
</body>
</html>
<head>
<title>Simple shadow Effect on hover image</title>
<style>
.shadow:hover
{
box-shadow:10px 10px 30px 5px #aaa;
}
</style>
</head>
<body>
<img src="shadow-effect-css.jpg" alt="shadow-effect-on-hover-image" style="width:450px;" class="shadow">
</body>
</html>
0 Comments