Description:-
In this Example we explain that how to create OnMouseOver Effect to Display Image in Zoom Mode when the mouse is over to this particular iamge.
To Create OnmouseOver Effect to Display Zoom image for this hover property of the CSS is used.
Hover property of CSS:-
By using this property you can select elements when you mouse over them.
For Ex:-
div.img a:hover img
{
border:1px solid #0000ff;
height:110;
width:150;
You can also apply hover Effect not only <a> tag you can apply on any Element.
Here is an example in which there are Five image when you move on First image then this image size is automatically change then other four image. This rule is appiled also to another Four image.
So,using this example you can improve your webDesign page very Beautyfull.
Example:-
<html>
<head>
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
height:110;
width:150;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
0 comments:
Post a Comment