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.Thenoffset-x, offset-y, blur-radius, spread-radiuswas given using a series of values0 0 1px 250pxin 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: