The codes of some sizzling photo effects using HTML and CSS are widely spread over the web.The hover effects was mainly used to gain the attention of the visitors easily especially to your important images or banner in your site.Let's move into coding part of the image focus css hover effect.
The below CSS code will add frame around your image and limit your image effects within the frame and does not disturb the other elements in your webpage.
.focus img{ -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 img:hover{ border: 70px solid #000!border-radius:50%!-webkit-transition: all 1s ease!-moz-transition: all 1s ease!-o-transition: all 1s ease!-ms-transition: all 1s ease!transition: all 1s ease; }
WITHOUT FRAMES:
The class focus pic in the
tag adds the CSS properties of both Focus and pic class there by you obtain a image with focus effect inside a frame.You can change the focus color of the border by replacing the color code #000 with your desired color.
The usage of frame around your image gives you many advantages but for those who need their image to focus without the frame around it just follow the below steps below to do it.But without frame image may disturb other web elements so use it with caution.
To do so replace the first line of the above focus effect code:" .focus img"with"img.focus"
Then replace the 8th".focus img:hover"with"img focus:hover".
Then all you have to do is to remove the
tag and define the class="focus" inside the
tag.
Yourtag should looks like this after modifications.
