当当前项目鼠标移到下面，图片顶到下面的时候，判断定位改变上下。
效果：
<!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,chrome=1" />
<title> 效果测试 </title>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0px;padding:0px;list-style: none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-decoration: none;}
.box{width: 1000px;margin: 100px auto;padding: 20px 0;border: 2px #ddd solid;background: #dadada;}
.flow{padding: 0 80px;height: 400px;overflow-y: scroll;}
.force-overflow{min-height: 0px;}
.list{ }
.list li{border-bottom:1px #aaa solid;cursor: pointer;}
.list a{position: relative;display: block;}
.list .theme{display: flex;color:#000;padding: 15px 0;font-size: 20px;justify-content: space-between;align-items: center}
.list .pic{opacity: 0;display: flex;position: absolute;left:0;top: 70px;right:0;z-index: 2;margin: auto;max-width:40%;height:400px;transform:translateY(5px);transition: all .5s ease-in-out;align-items: center;justify-content: center;}
.list .pic img{/* width:100%; */height: 100%;object-fit: cover;}
.list li:hover h4{color:red }
.list li:hover .pic{opacity: 1;}
</style>
<div class="box">
<div class="flow">
<ul class="list">
<li>
<a href="javascript:void(0)">
<div class="theme"><h4>DATA - 01</h4><span>2022</span></div>
<div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="theme"><h4>DATA - 02</h4><span>2022</span></div>
<div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="theme"><h4>DATA - 03</h4><span>2022</span></div>
<div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="theme"><h4>DATA - 04</h4><span>2022</span></div>
<div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="theme"><h4>DATA - 05</h4><span>2022</span></div>
<div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="theme"><h4>DATA - 06</h4><span>2022</span></div>
<div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="theme"><h4>DATA - 07</h4><span>2022</span></div>
<div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="theme"><h4>DATA - 08</h4><span>2022</span></div>
<div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="theme"><h4>DATA - 09</h4><span>2022</span></div>
<div class="pic"><img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></div>
</a>
</li>
</ul>
<div class="force-overflow"></div>
</div>
</div>
<script>
</script>
</body>
</html>
