css3响应式图文卡片悬停切换特效代码下载


css3响应式图文卡片悬停切换特效代码下载
css3响应式图文卡片悬停切换特效代码下载以及响应式、图文卡片、悬停切换等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. HTML代码

<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>

相关推荐

发表评论

相关文章