Focus effect is one of the nice css3 hover effect, The Css3 code is used to create this effect without any javascript and jquery help. The focus animation effect is easily attract the website visitors and also highlight the image perfectly. Now will see how to create this simple hover effect with the help of css.
transition: all 1s ease; this code helps you to change the property values smoothly and on hover to set the border: 70px solid #000; border-radius: 50%; to focus the picture. using the below simple css3 code you can achive this simple focus effect. Here also have the demo page please check it out and download the code if you want. I hope this example is useful to you.
transition: all 1s ease; this code helps you to change the property values smoothly and on hover to set the border: 70px solid #000; border-radius: 50%; to focus the picture. using the below simple css3 code you can achive this simple focus effect. Here also have the demo page please check it out and download the code if you want. I hope this example is useful to you.
Code for Css3 Focus effect:
<html>
<head>
<title>Simple Focus effect on hover image using css3</title>
<style>
.focus {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.focus:hover {
border: 70px solid #000;
border-radius: 50%;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.pic {
border: 1px solid #000;
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="focus pic">
<img src="focus-img.jpg" alt="focus">
</div>
</body>
</html>
<head>
<title>Simple Focus effect on hover image using css3</title>
<style>
.focus {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.focus:hover {
border: 70px solid #000;
border-radius: 50%;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.pic {
border: 1px solid #000;
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="focus pic">
<img src="focus-img.jpg" alt="focus">
</div>
</body>
</html>
0 Comments