实现鼠标滑动图片，图片放大并出现遮罩层

效果图
使用的是bootstrap框架、自行下载吧
代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<!-- bootstrap-css -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- font-awesome icons -->
<!-- //font-awesome icons -->
<!-- font -->
<!-- //font -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<style>
.our-speciality{
  position: relative;
  padding: 100px 0px;
}
.img-box img{
  width: 270px;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
.single-item:hover img{
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
.our-speciality .single-item{
  position: relative;
  width:270px;
}
.our-speciality .overlay-box {
    position: absolute;
    left: 0px;
    bottom: -100%;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #ffffff;
    transition: all 700ms ease;
    -webkit-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -moz-transform: scaleY(0);
    transform: scaleY(0);
}
.our-speciality .overlay-inner {
    position: absolute;
    left: 0px;
    top: 0%;
    width: 100%;
    height: 100%;
    display: table;
    vertical-align: middle;
    padding: 10px 30px;
    background: #15223f;
    opacity: .4;
}
.our-speciality .inner-box:hover .overlay-box {
    bottom: 0px;
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -moz-transform: scaleY(1);
    transform: scaleY(1);
}
.our-speciality .inner-box {
    position: relative;
    overflow: hidden;
}
.img-title{
  position: absolute;
  left: 29px;
  bottom: 21px;
  font-size: 28px;
  font-family: 'Playball',sans-serif;
  line-height: 36px;
  color: #fff;
  font-weight: 400;
  display: inline-block;
  transition: all 500ms ease;
}
.our-speciality .single-item:hover .img-title{
  color: #fab740;
  transition: all 500ms ease;
}
</style>
</head>
<body>
    <section class="our-speciality">
        <div class="container">
                <div class="single-item">
                    <div class="inner-box">
                        <a href="#">
                            <div class="img-box"><figure><img src="images/special-1.jpg" alt=""></figure></div>
                            <div class="overlay-box">
                                <div class="overlay-inner">
                                    
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="img-title">Delious Food</div>
                </div>
        </div>
    </section>
</body>	
</html>
实现鼠标滑动图片，图片放大并出现遮罩层

猜你喜欢
