We create a Web page named boredertransitioneffects.html file.
<!doctype html>
<head>
<title>Transition effect on the borders of an element</title>
<style type="text/css">
div{
background:green;
}
.area{
border-bottom:6px solid #ff34ff;
height:500px;
position:relative;
}
.item{
width:240px;
height:200px;
opacity:0.9;
border-radius:5px 5px 5px 5px;
}
.area.item{
-webkit-transition:all 0.5s linear;
}
.item:hover,
item:focus{
-webkit-border-radius:500px;
</style>
</head>
<body>
<DIV class="area">
<h1>Working with transition </h1>
<img class="item item-1" src="nature1.jpg">
<img class="item item-2" src="nature2.jpg"><br>
<img class="item item-3" src="nature3.jpeg">
<img class="item item-4" src="nature6.jpg">
</DIV>
</body>
</html>
Here we have displayed four image using the img element and applied the transition effect for changing the border radius on the mouse hover event.
The output of the above web page:
Now when we move the mouse pointer over an image the shape of the image changes from square to round. As shown in the output:
<!doctype html>
<head>
<title>Transition effect on the borders of an element</title>
<style type="text/css">
div{
background:green;
}
.area{
border-bottom:6px solid #ff34ff;
height:500px;
position:relative;
}
.item{
width:240px;
height:200px;
opacity:0.9;
border-radius:5px 5px 5px 5px;
}
.area.item{
-webkit-transition:all 0.5s linear;
}
.item:hover,
item:focus{
-webkit-border-radius:500px;
</style>
</head>
<body>
<DIV class="area">
<h1>Working with transition </h1>
<img class="item item-1" src="nature1.jpg">
<img class="item item-2" src="nature2.jpg"><br>
<img class="item item-3" src="nature3.jpeg">
<img class="item item-4" src="nature6.jpg">
</DIV>
</body>
</html>
Here we have displayed four image using the img element and applied the transition effect for changing the border radius on the mouse hover event.
The output of the above web page:
Now when we move the mouse pointer over an image the shape of the image changes from square to round. As shown in the output:
No comments:
Post a Comment