文章列表图片鼠标悬停向右逐渐稍微倾斜放大-52mjj

可应用到各类资源站或者博客。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.article {
    position: relative;
    overflow: hidden;
    width: 300px; /* 根据你的实际需求设置宽度 */
}

.article img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* 过渡效果，0.3秒 */
}

.article:hover img {
    transform: scale(1.1) rotate(3deg); /* 放大并稍微倾斜 */
}
</style>
</head>
<body>

<div class="article">
  <img src="article1.jpg" alt="Article 1">
  <h3>文章标题1</h3>
  <p>文章摘要或描述</p>
</div>

<div class="article">
  <img src="article2.jpg" alt="Article 2">
  <h3>文章标题2</h3>
  <p>文章摘要或描述</p>
</div>

<!-- 可以添加更多的文章块 -->

</body>
</html>

52mjj提供的所有内容仅供学习与交流。通过使用本站内容随之而来的风险以及法律责任与本站无关，所承担的法律责任由使用者承担。

THE END