您现在的位置是：网站首页> 编程资料编程资料

html+css实现响应式卡片悬停效果CSS3防疫知识图文响应式布局代码CSS3响应式个人名片图文布局代码详解CSS3实现响应式手风琴效果css3 响应式媒体查询的示例代码HTML5 图片悬停放大的实现代码示例html用title属性实现鼠标悬停显示文字

2023-10-08 438人已围观

简介这篇文章主要介绍了 html+css实现响应式卡片悬停效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

实现：

1. 定义标签，.kapian为最底层盒子，然后两个子盒子一个放图片，一个放文本：


The aurora borealis
natural
 Aurora Borealis is a colorful luminous phenomenon that appears over the high magnetic latitude region of the planet's North Pole. I love the aurora borealis. It's so beautiful.

2.先定义底层盒子的css基本样式，长宽等，就不详细说明了：

 .kapian{ position: relative; width: 300px; height: 400px; border-radius: 3px; background-color: #fff; box-shadow: 2px 3px 3px rgb(139, 138, 138); overflow: hidden; cursor: pointer; transition: all 0.3s; } .kapian:hover{ box-shadow: 2px 3px 10px rgb(36, 35, 35); }

:hover鼠标经过后盒子阴影变化。
transition: all 0.3s;过渡效果，阴影在0.3s内慢慢变化

3. 图片的基本样式，采用绝对定位：

 .tu{ position: absolute; top: 0; left: 0; width: 100%; height: 300px; overflow: hidden; } .tu img{ width: 100%; height: 100%; transition: all 0.5s; } .kapian:hover .tu img{ transform: scale(1.2); filter: blur(1px); }

:hover鼠标经过后图片变大，而且变模糊；
transform: scale(1.2);图片变大为1.2倍；
filter: blur(1px);图片变模糊；

4 .定义装文本这个盒子的基本样式，采用绝对定位：

 .wenben{ position: absolute; bottom: -200px; width: 100%; height: 300px; background-color: rgb(247, 242, 242); transition: 0.5s; } .kapian:hover .wenben{ bottom: 0px; }

:hover鼠标经过后文本框绝对定位的bottom发生改变，使得呈现文本框向上展开的效果；

5 .文本框里字符的样式：

 .wenben h2{ color: rgb(21, 74, 172); line-height: 60px; text-align: center; } .wenben p{ padding: 0 30px; font-family: 'fangsong'; font-size: 16px; font-weight: bold; line-height: 20px; text-align: center; }

完整代码：

Document
The aurora borealis
natural
 Aurora Borealis is a colorful luminous phenomenon that appears over the high magnetic latitude region of the planet's North Pole. I love the aurora borealis. It's so beautiful.