Image focus CSS hover effect

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.

VIEW DEMO

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.

.pic  img{
        border: 10px solid #fff;
        float: left;
        height: 300px;
        width: 300px;
        margin: 20px;
        overflow: hidden;
        -webkit-box-shadow: 5px 5px 5px #111;
                    -box-shadow: 5px 5px 5px #111;
        }

This code will focus the image when you hover it.

FOCUS EFFECT:

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

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.

1. To do so replace the first line of the above focus effect code: ” .focus img” with “img.focus”
2. Then replace the  8th “.focus img:hover” with “img focus:hover”.
3. Then all you have to do is to remove the <div> tag and define the class=”focus” inside the <img> tag.
4.  Your <img> tag should looks like this after modifications.

                   <img class=”focus” src=”……..”></img>