前言

今天分享一个简单的卡片鼠标悬停动画，初始显示一张图片，当鼠标移至卡片上方时，显示文字，先来看看预览效果：

代码实现

页面布局

<div class="view view-first">  
    <img src="./images/1.webp" />  
    <div class="mask">  
    <h2>Title</h2>  
    <p>Your Text</p>  
        <a href="#" class="info">Read More</a>  
    </div>  
</div>  

这段代码了一个用于展示图片的容器 <div> 元素，其中包含了一个图片 <img> 元素和一个用于显示图片标题、文字和链接的 <div> 元素。这个容器使用了类名为 view 和 view-first 的 CSS 类来进行样式控制。

页面样式

.view {
    width: 1080px;
    height: 1430px;
    margin: 10px auto;
    border: 10px solid red;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: pointer;
}
.view .mask, .view .content {
    width: 1080px;
    height: 1430px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    font-size: 180px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    margin: 220px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 120px;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    font-size: 60px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}


.view-first img { 
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7); 
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p { 
    transform: translateY(100px);
    opacity: 0;
	transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
	transition: all 0.2s ease-in-out;
}

.view-first:hover img { 
	transform: scale(1.2);
} 
.view-first:hover .mask { 
	opacity: 0.8;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}

这段 CSS 代码定义了 .view 和 .view-first 这两个类的样式属性。其中，.view 类定义了容器的基本样式，包括宽度、高度、边距、背景颜色、阴影等。.view-first 类定义了容器在鼠标悬停时的效果，包括图片放大、遮罩层透明度变化、标题、文字和链接的透明度和位置变化等。这段代码通过使用伪类 :hover 来控制在鼠标悬停时的效果。同时，这段 CSS 代码中包含了一些过渡效果（transition），通过设置不同的过渡时间和延迟时间，实现了在鼠标悬停时的平滑动画效果。同时，通过使用透明度（opacity）、位移（transform: translateY()）和缩放（transform: scale()）等属性，实现了图片和文字的渐现和渐变效果。接下来对各个样式进行详细解释：

.view {
    width: 1080px;
    height: 1430px;
    margin: 10px auto;
    border: 10px solid red;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: pointer;
}

设置容器元素的宽度和高度，margin: 10px auto;设置容器元素的外边距，使其在水平方向上居中，上下边距为 10 像素，text-align: center;文本的水平对齐方式为居中，box-shadow: 1px 1px 2px #e6e6e6;设置容器元素的阴影效果，水平和垂直偏移都为 1 像素，模糊半径为 2 像素，阴影颜色为 #e6e6e6。cursor: pointer;设置鼠标悬停在容器元素上时的光标样式为手型。

.view .mask, .view .content {
    width: 1080px;
    height: 1430px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}

选中类名为 "mask" 和 "content" 的元素，采用绝对定位，设置top和left偏移量为0。

.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    font-size: 180px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    margin: 220px 0 0 0
}

对字体颜色和大小进行设置，文字水平居中，设置背景色等，text-transform: uppercase;设置标题文本转换为大写。

.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 120px;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    font-size: 60px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}

对子元素p标签和指定a标签进行字体样式进行设置，text-decoration: none;去除下划线，a元素在鼠标悬停状态下的添加阴影。

.view-first img { 
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7); 
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p { 
    transform: translateY(100px);
    opacity: 0;
	transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
	transition: all 0.2s ease-in-out;
}

.view-first:hover img { 
	transform: scale(1.2);
} 
.view-first:hover .mask { 
	opacity: 0.8;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}

对各元素在鼠标悬停状态下的样式进行设置，并添加动画效果，主要动画元素transform: scale(1.2);图片在悬停状态下缩放1.2倍，transform: translateY(0px);在y轴上偏移量，transition-delay: 0.1s;动画延迟时间，ease-in-out缓入缓出。

结语

以上便是全部代码了，总体比较简单，只需要使用一些简单的动画属性即可，喜欢的小伙伴可以拿去看看，根据自己想要的效果进行修改。