Pure CSS3 mouse slide over picture mask layer animation effect

Brief tutorials

This is a pure CSS3 made with the mouse to slide the picture mask layer animation effect. In this effect, when the mouse is over or hovering over the picture, a mask layer animation appears on the picture, showing the picture's description information and the link icon button.

How to use

Introduce the bootstrap style file and the Font-awesome font icon file in the page.

<link rel= "stylesheet" type= "Text/css" href= "path/to/css/bootstrap.min.css" ><link rel= "stylesheet" type= " Text/css "href=" Path/to/css/font-awesome.min.css ">

HTML structure

The HTML structure for this effect is as follows:

<div class= "Container" > <div class= "Row" > <div class= "col-md-4 col-sm-6" > <div C                    lass= "box" >  <div class= "box-content" >                    

CSS Styles

Add the following CSS style to the mouse over the picture mask layer effect.

. box{Text-align:center;    Overflow:hidden; Position:relative;}.    box:before{content: "";    width:0;    height:100%;    Background: #000;    PADDING:14PX 18px;    Position:absolute;    top:0;    left:50%;    opacity:0; Transition:all 500ms cubic-bezier (0.47, 0, 0.745, 0.715) 0s;}.    box:hover:before{width:100%;    left:0; opacity:0.5;}.    Box img{width:100%; Height:auto;}.    box. box-content{width:100%;    PADDING:14PX 18px;    Color: #fff;    Position:absolute;    top:38%; left:0;}.    box. title{font-size:25px;    font-weight:600;    line-height:30px;    Text-transform:uppercase;    margin:0;    opacity:0; Transition:all 0.5s ease 0s;}.    box. post{font-size:15px;    Text-transform:capitalize;    opacity:0; Transition:all 0.5s ease 0s;}.    Box:hover. Title,.box:hover. post{opacity:1; transition-delay:0.7s;}.    box. icon{padding:0;    margin:0;    List-style:none; margin-top:15px;}. box. Icon li{Display:Inline-block;}.    box. Icon Li a{display:block;    width:40px;    height:40px;    line-height:40px;    border-radius:50%;    Background: #f74e55;    font-size:20px;    font-weight:700;    Color: #fff;    margin-right:5px;    opacity:0;    Transform:translatey (50px); Transition:all 0.5s ease 0s;}.    Box:hover. Icon Li a{opacity:1;    Transform:translatey (0px); transition-delay:0.5s;}. Box:hover. Icon Li:last-child a{transition-delay:0.8s;} @media only screen and (max-width:990px) {. box{margin-bottom:30px;}}