Photo FOCUS Image HOVER Effect Using HTML and CSS

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.The choice of images should be made right to make this effect even stunning See the demo effect of Photo focus here.We have added the codes for photo tilting in the last post check it out.
CSS CODE:
FRAME Around your Image: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.

1. <style type="text/css">
2. .pic img {
3.  border: 10px solid #fff;
4.  float: left;
5.  height: 300px;
6.  width: 300px;
7.  margin: 20px;
8.  overflow: hidden;
9.  -webkit-box-shadow: 5px 5px 5px #111;
10.  -box-shadow: 5px 5px 5px #111;
11. }
12. </style>
13. <div class="pic"> <img src="http://........"></img> </div>

FOCUS EFFECT:
This code will focus the image when you hover it.
. 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;
                          }
<div class="focus pic"> <img src=".........."></img> </div>

The class focus pic in the <div> 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.

WITHOUT FRAMES: 
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 <div> tag and define the class="focus" inside the <img> tag.
• Your <img> tag should looks like this after modifications.
• <img class="focus" src="........"></img>

Share this post with others through social networks if you like it