Image hover Mask effect using CSS and HTML

Image hover effects using simple CSS and HTML are quite familiar among the web designers since it boost the attraction of a site. There are several types of image hover effects widely spread over the internet and today we are about to see a similar one in this article. This Image hover mask effect is nothing but a simple mask over the image before hovering and when hovered the mask will be removed to reveal the background picture. 

VIEW DEMO

CSS CODE:

.bg{
      background: url('Your image URL') no-repeat;
      background-size: 250px 250px;
      }
    .mask{
         float: left;
         width: 250px;
         height: 250px;
         border-radius:50%;
         box-shadow: inset 0 0 1px 250px rgba(0,0,0,0.6);
         transition: all 0.5s ease-in;
         transition: box-shadow 600ms ease-in-out;
         -webkit-border-radius:50%;
         -webkit-box-shadow: inset 0 0 1px 250px rgba(0,0,0,0.6);
         -webkit-transition: box-shadow 400ms ease-in-out;
         -moz-border-radius:50%;
         -moz-box-shadow: inset 0 0 1px 250px rgba(0,0,0,0.6);
         -moz-transition: box-shadow 600ms ease-in-out;
         -o-transition: box-shadow 600ms ease-in-out;
         -ms-transition: box-shadow 600ms ease-in-out;
            }
    .mask:hover {
          opacity: 1;
          -webkit-transition: all 0.5s ease-in;
          -moz-transition: all 0.5s ease-in;
          -o-transition: all 0.5s ease-in;
          transition: all 0.5s ease-in;
          box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.3);
                          }

In the above CSS code we are implementing the mask over the image using the “box-shadow” property. The “inset” value in the “box-shadow” specifies that the shadow should be inside the image as if the content was depressed inside the box. Then offset-x, offset-y, blur-radius, spread-radius was given using a series of values 0 0 1px 250px in the above code and color was given using the rgba model. Thus it gives a look of a mask over the image and the mask will be removed when the image was hovered.

HTML CODE:

<div class="mask bg"></div>