点击图片 突出显示图片
程序员文章站
2022-05-28 21:48:20
...
代码
<!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”进行下载