点击图片突出显示图片

代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Albergo || SHARED ON THEMELOCK.COM -  Responsive HTML 5 Template</title>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/revolution-slider.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">

<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="css/responsive.css" rel="stylesheet">
<Style>
 @import url(css/font-awesome.css);
@import url(css/jquery.fancybox.css);
.img-gallery{
  position: relative;
  padding: 100px 0px;
  background: #f5f5f8;
  width: 100%;
}
.img-gallery .single-item .img-holder {
  display: block;
  overflow: hidden;
  position: relative;   
  width: 375px;
}
.img-gallery .single-item .img-holder img {
  position: relative;
  border-right: 2px solid #f5f5f8;
  border-left: 2px solid #f5f5f8;
  width: 100%; 
  height: 378px;     
}
.img-gallery .single-item .img-holder .overlay .box .content a i {
  border: 2px solid #fff;
  text-align: center;
  border-radius: 3%;
  color: #fab740;
  display: inline-block;
  font-size: 20px;
  height: 55px;
  line-height: 55px;
  transition: all 500ms ease 0s;
  width: 55px;
  border-radius: 50%;   
}
.img-gallery .single-item:hover .img-holder .overlay{
  -webkit-transform: scale(1);
  transform: scale(1);
}
.img-gallery .overlay .box .content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.img-gallery .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    background-color: rgba(21, 34, 63, 0.8);
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
.img-gallery .overlay .box {
    display: table;
    height: 100%;
    width: 100%;
}
.img-gallery .single-item .img-holder .overlay .box .content .text{
  font-size: 20px;
  font-family: 'Lato',sans-serif;
  line-height: 30px;
  font-style: italic;
  color: #fab740;
}
.img-gallery .owl-dots{
  display: none !important;
}


</Style>
</head>
<body>
    <section class="img-gallery">
        <div class="container">
            <div class="single-item">
                <div class="img-holder">
                    <figure><img src="images/1.jpg" alt=""></figure>
                    <div class="overlay">
                        <div class="box">
                            <div class="content">
                                <a href="images/1.jpg" class="fancybox"><i class="fa fa-plus" aria-hidden="true"></i></a>
                                <div class="text">Photo tytle here</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/theme.js"></script> 

<!-- End of .page_wrapper -->
</body>	
</html>
由于包含的js及css比较多，不好复制、请到下载界面查找“鼠标点击图片、图片放大.rar”进行下载
点击图片 突出显示图片

猜你喜欢

点击图片突出显示图片
