Image hover Mask effect using CSS and HTML

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest
image-hover-mask-effect-css-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>

The HTML code of this hover effect is simple as all we have to do is make a <div> container with the class “mask bg” to use the properties of both the class

Related Designs and Schematics

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest
The following two tabs change content below.

Frank Donald

Junior Network Engineer at Tata Communications
Frank Donald is an Electronics and Communication Engineer who is very passionate about his subject. Reading, Surfing and Blogging are the things he loves.

Ask your query

Be the First to Comment!

Notify of
avatar
wpDiscuz