Pure CSS3 mouse over image mask layer animation effect

Brief tutorial

This is an animation special effect made by using pure CSS3 to slide the mouse over the image mask layer. In this special effect, when the mouse slides over or hovers over the image, a mask layer animation will appear on the image, showing the image description information and link icon button.

Usage

Introduce bootstrap style files and font-awesome font icon files into 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 of this special effect is as follows:

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="box">
                <img src="images/1.jpg">
                <div class="box-content">
                    <h3 class="title">雷神索尔</h3>
                    <span class="post">卡通恶搞造型</span>
                    <ul class="icon">
                        <li><a href="#"><i class="fa fa-search"></i></a></li>
                        <li><a href="#"><i class="fa fa-link"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
 
        <div class="col-md-4 col-sm-6">
            <div class="box">
                <img src="images/2.jpg">
                <div class="box-content">
                    <h3 class="title">蜘蛛侠</h3>
                    <span class="post">卡通恶搞造型</span>
                    <ul class="icon">
                        <li><a href="#"><i class="fa fa-search"></i></a></li>
                        <li><a href="#"><i class="fa fa-link"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
 
        <div class="col-md-4 col-sm-6">
            <div class="box">
                <img src="images/3.jpg">
                <div class="box-content">
                    <h3 class="title">钢铁侠</h3>
                    <span class="post">卡通恶搞造型</span>
                    <ul class="icon">
                        <li><a href="#"><i class="fa fa-search"></i></a></li>
                        <li><a href="#"><i class="fa fa-link"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS style

This is the special effect for the mouse to slide over the image mask layer Add the following CSS styles.

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

For more pure CSS3 mouse-over animation special effects of the image mask layer, please pay attention to the PHP Chinese website!