话不多说，直接源码
点击看效果demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./demo.css" type="text/css" />
</head>
<body>
<div class="demo-container">
<div class="img-container">
<div class="method4">
<ul class="zxx_ul_image">
<li>
<img src='../images/imgcommon1.jpg' />
</li>
<li>
<img src="../images/imgcommon3.jpg" />
</li>
<li>
<img src="../images/imgcommon2.jpg" />
</li>
<li>
<img src="../images/imgcommon4.jpg" />
</li>
<li>
<img src="../images/imgcommon5.jpg" />
</li>
<li>
<img src="../images/imgcommon7.jpg" />
</li>
</ul>
</div>
</div>
<div class="show-platform">
<div class="round_shade_box" id="zoom">
<div class="round_shade_top">
<span class="round_shade_topleft"></span>
<span class="round_shade_topright"></span>
</div>
<div class="round_shade_centerleft">
<div class="round_shade_centerright">
<div class="round_shade_center" id="zoom_content">
<img id="showPic" src="">
</div>
</div>
</div>
<div class="round_shade_bottom">
<span class="round_shade_bottomleft"></span>
<span class="round_shade_bottomright"></span>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
function hoverOut(e) {
$('#zoom').animate({
opacity : "hide"
}, 500, null, function() {
//动画完成回调
$('#showPic').css('display', 'none');
});
};
function hoverIn(e) {
$('#zoom').animate({
opacity : "show"
}, 500, null, function() {
//动画完成回调
$('#showPic').attr('src', $(e.currentTarget).find('img').attr('src'));
$('#showPic').css('display', 'block');
});
};
$('.zxx_ul_image li').hover(hoverIn, hoverOut);
});
</script>
</body>
</html>
css主要用到两个地方：
1.垂直居中展示图片
2.圆角展示外框
以上两个地方的css可以看到前几篇的点击放大图片和垂直居中图片