css实现悬浮卡片

结果展示
在这里插入图片描述

html代码

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" type="text/css" href="./111.css">
</head>
<body><div class="container"><ul><li><div class="port-1 effect-1"><div class="image-box"><img src="../vuekinesis/src/assets/2.jpg" alt="Image-1"></div><div class="text-desc"><h3>xxx</h3><p>8年学习经验 </p></div></div></li></ul></div></html>

css代码


.container {margin: 0 auto;max-width: 1060px;
}h2 {color: #fff;float: left;width: 100%;font-size: 24px;font-weight: 400;text-align: center;padding: 50px 0 40px;position: relative;z-index: 50;
}h2 span {position: relative;padding-bottom: 10px;
}h2 span:after {content: "";width: 50%;height: 3px;background-color: #fff;position: absolute;left: 25%;bottom: 0;
}* {margin: 0;padding: 0;box-sizing: border-box;
}img {max-width: 100%;vertical-align: middle;
}.full-length {width: 100%;float: left;padding-bottom: 80px;
}ul {margin: 0 -1.5%;
}li {float: left;width: 31.33%;margin: 10px 1%;list-style: none;
}.text-desc {position: absolute;left: 0;top: 0;background-color: #fff;height: 100%;opacity: 0;width: 100%;padding: 20px;
}
.port-1 {width: 100%;position: relative;overflow: hidden;text-align: center;
}.port-1 .text-desc {opacity: 0.9;top: 100%;transition: 0.5s;color: #000;padding: 45px 20px 20px;
}.port-1 img {transition: 0.5s;
}.port-1:hover img {transform: scale(1.2);
}.port-1.effect-1:hover .text-desc {top: 0;
}