css3卡片悬停图文切换特效

css3卡片悬停图文切换特效

收藏
css3卡片悬停图文切换特效
CSS3 Clip-path属性制作卡片悬停动画,图片模糊放大遮罩显示文字标题效果。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 小沫沫
  • 上传时间 6年前

使用方法:

1、head引入css文件

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

2、body引入部分

<div class="wrapper">
	<div class="card">
		<img src="img/1.jpg">
		<div class="descriptions">
			<h1>逃亡</h1>
			<p>在枪杀了一名国际暗杀协会的高层成员后,传奇杀手约翰·威克发现自己被剥夺了该组织的保护性服务。现在,威克头上还拿着1400万美元的悬赏金,他必须在纽约街头奋力拼搏,成为世界上最残忍杀人犯的目标。</p>
			<button>查看更多>></button>
		</div>
	</div>
	<div class="card">
		<img src="img/2.jpg">
		<div class="descriptions">
			<h1>追凶</h1>
			<p>如果你有问题,没有其他地方可以转向,神秘而难以捉摸的罗伯特·麦考尔将为你寻求的治安法官提供帮助。然而,这一次,麦考尔的过去削减特别是在家附近,当暴徒杀死苏珊普卢默-他的最好的朋友和前同事。现在出去报仇,麦考尔必须带上一队训练有素的刺客,他们将不惜任何代价摧毁他。</p>
			<button>查看更多>></button>
		</div>
	</div>
</div>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。