Pure CSS3 mouse over image mask layer animation effect

高洛峰
Release: 2017-03-06 14:14:12
Original
3075 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!