css实现图片卡片悬浮聚焦显示文字效果代码-html代码-BFW代码库

css实现图片卡片悬浮聚焦显示文字效果代码

代码语言：html

所属分类：悬停

代码描述：css实现图片卡片悬浮聚焦显示文字效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Caudex&display=swap");
        
        body {
        	margin: 0;
        	padding: 0;
        	min-height: 100vh;
        	display: flex;
        	justify-content: center;
        	align-items: center;
        	font-family: "Caudex", sans-serif;
        }
        
        h1 {
          text-align:center;
        }
        .container
        {
        	position: relative;
        	width: 1200px;
        	display: flex;
        	flex-wrap: wrap;
        	justify-content: space-around;
        }
        .container .box
        {
        	position: relative;
        	width: 280px;
        	height: 400px;
        	margin: 20px 0;
        	box-sizing: border-box;
        	overflow: hidden;
        }
        .container .box .imgBx
        {
        	position: absolute;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%;
        	background: #002417;
        	clip-path: circle(400px at center 100px);
        	transition: 0.5s;
        	transition-delay: 0.5s;
        }
        .container .box:hover .imgBx
        {
        	clip-path: circle(80px at center 100px);
        	transition-delay: 0s;
        }
        .container .box .imgBx img
        {
        	position: absolute;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%;
        	object-fit: cover;
        }
        .container .box .content
        {
        	position: absolute;
        	left: 0;
        	bottom: 0;
        	width: 100%;
        	height: 55%;
        	padding: 20px;
        	box-sizing: border-box;
.........完整代码请登录后点击上方下载按钮下载查看