Pure CSS3 mouse over image mask layer animation effect-CSS Tutorial-php.cn

Pure CSS3 mouse over image mask layer animation effect

高洛峰

Release： 2017-03-06 14:14:12

Original

3065 people have browsed it

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">

Copy after login

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>

Copy after login

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

Copy after login

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