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:
<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>
