鼠标放上面
<div class="movie-grid">
<!-- 电影1 -->
<div class="movie-card">
<a href="https://example.com/movie1" target="_blank">
<img src="https://via.placeholder.com/200x280" alt="霸王别姬">
<div class="overlay">
<h4>霸王别姬</h4>
<p>评分：9.6</p>
<p>经典中的经典，艺术与人生交织。</p>
</div>
</a>
</div>
<!-- 电影2 -->
<div class="movie-card">
<a href="https://example.com/movie2" target="_blank">
<img src="https://via.placeholder.com/200x280" alt="阿甘正传">
<div class="overlay">
<h4>阿甘正传</h4>
<p>评分：9.5</p>
<p>人生就像一盒巧克力。</p>
</div>
</a>
</div>
<!-- 电影3 -->
<div class="movie-card">
<a href="https://example.com/movie3" target="_blank">
<img src="https://via.placeholder.com/200x280" alt="肖申克的救赎">
<div class="overlay">
<h4>肖申克的救赎</h4>
<p>评分：9.7</p>
<p>希望让人自由。</p>
</div>
</a>
</div>
</div>
<style>
.movie-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 15px;
}
.movie-card {
width: calc(33.333% - 10px);
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.movie-card:hover {
transform: translateY(-5px);
}
.movie-card img {
width: 100%;
height: auto;
display: block;
}
.movie-card .overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.75);
color: #fff;
opacity: 0;
transition: opacity 0.3s;
padding: 10px;
font-size: 13px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.movie-card:hover .overlay {
opacity: 1;
}
.movie-card .overlay h4 {
margin: 0 0 5px;
font-size: 15px;
color: #ffd700;
}
.movie-card .overlay p {
margin: 2px 0;
line-height: 1.3;
}
</style>
