效果演示在这里插入图片描述

代码目录
在这里插入图片描述
主要代码实现

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title&gt;html5+css3鼠标悬停图文卡片动画切换特效</title&gt;

<link rel="stylesheet" href="css/style.css"&gt;

</head&gt;
<body&gt;

<div class="container">
	<div class="card">
		<figure class="card__thumb">
			<img src="img/1.jpg" alt="Picture by Kyle Cottrell" class="card__image">
			<figcaption class="card__caption">
				<h2 class="card__title">美国宇航局已经发现了数百颗潜在的新行星</h2>
				<p class="card__snippet">美国宇航局公布了开普勒太空望远镜发现的219个新“候选行星”名单,其中10个与地球大小相似可能被其他生命形式居住。</p>
				<a href="" class="card__button">查看更多</a>
			</figcaption>
		</figure>
	</div>

	<div class="card">
		<figure class="card__thumb">
			<img src="img/2.jpg" alt="Picture by Nathan Dumlao" class="card__image">
			<figcaption class="card__caption">
				<h2 class="card__title">This Is Your Body And Brain On Coffee</h2>
				<p class="card__snippet">Drinking more caffeine during the coronavirus lockdown? Here's how it can affect you over time and advice on making it better for you.</p>
				<a href="" class="card__button">查看更多</a>
			</figcaption>
		</figure>
	</div>

	<div class="card">
		<figure class="card__thumb">
			<img src="img/3.jpg" alt="Picture by Daniel Lincoln" class="card__image">
			<figcaption class="card__caption">
				<h2 class="card__title">Why You Should Bring Your Dog To Work</h2>
				<p class="card__snippet">On Friday, offices around the country celebrated the 15th annual Take Your Dog to Work Day. Though the event's primary goal is to raise awareness for pet adoption, the unanticipated impact may be a slightly more relaxing work environment for any office choosing to participate.</p>
				<a href="" class="card__button">查看更多</a>
			</figcaption>
		</figure>
	</div>
</div>

</body>
</html>

CSS:

html {
  box-sizing: border-box;
  font-size: 62.5%;
}
html *,
html *:before,
html *:after {
  box-sizing: inherit;
}
*{margin:0;padding:0;list-style-type:none;}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #e6e6e6;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 20px 0 80px;
}

.card {
  width: 300px;
  margin: 10px;
  background-color: white;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
}
.card:hover .card__caption {
  top: 50%;
  transform: translateY(-50%);
}
.card:hover .card__image {
  transform: translateY(-10px);
}
.card:hover .card__thumb::after {
  top: 0;
}
.card:hover .card__snippet {
  margin: 20px 0;
}
.card__thumb {
  position: relative;
  max-height: 500px;
  overflow: hidden;
}
.card__thumb::after {
  position: absolute;
  top: 0;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 40%, rgba(255, 255, 255, 0) 100%);
  transition: .3s;
}
@media (min-width: 1024px) {
  .card__thumb::after {
    top: calc(100% - 140px);
  }
}
.card__image {
  transition: .5s ease-in-out;
}
.card__caption {
  position: absolute;
  top: 50%;
  z-index: 1;
  padding: 0 20px;
  color: white;
  transform: translateY(-50%);
  text-align: center;
  transition: .3s;
}
@media (min-width: 1024px) {
  .card__caption {
    top: calc(100% - 110px);
    transform: unset;
  }
}
.card__title {
  display: -webkit-box;
  max-height: 85px;
  overflow: hidden;
  font-family: 'Playfair Display', serif;
  font-size: 23px;
  line-height: 28px;
  text-shadow: 0px 1px 5px black;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.card__snippet {
  display: -webkit-box;
  max-height: 150px;
  margin: 20px 0;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 20px;
  text-overflow: ellipsis;
  transition: .5s ease-in-out;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
@media (min-width: 1024px) {
  .card__snippet {
    margin: 60px 0;
  }
}
.card__button {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  border: 1px solid white;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  transition: .3s;
}
.card__button:hover {
  color: black;
  background-color: white;
}


备注部分资源来自网络收集整理、侵权立删。

原文地址:https://blog.csdn.net/qq_36595761/article/details/125798592

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_40948.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注