css卡片悬浮特效-html代码-BFW代码库

css卡片悬浮特效

代码语言：html

所属分类：悬停

代码描述：css卡片悬浮特效

代码标签：特效

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.fbox{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.container{
  height: 100%;
  background-color: #f4f4f4;
  padding: 50px 0;
  box-sizing: border-box;
}
.card{
/*   width: calc(100% / 3 - 100px); */
  width: 450px;
  height: 400px;
  margin: 10px;
  box-shadow: 0px 3px 6px #00000050;
/*   border-radius: 10px; */
  transition: .5s;
  background-color: #ffffff;
  position: relative;
  z-index: 1;
}
.card:first-of-type:hover{
  transform: translateY(-30px);
  transition: .5s;
  box-shadow: 0 0 30px rgba(0,0,0,.2);
}

.card:nth-of-type(2):hover .card__image img{
  transform: scale(1.2);
  transition: .5s;
  box-shadow: 0 0 30px rgba(0,0,0,.2);
  overflow: hidden;
  opacity: 0.7;
}

.card:last-of-type:hover{
  border: 5px solid #FF7734;
  box-sizing: border-box;
  transition: .3s;
}

.card__image{
  margin-top: 0px;
  width: 100%;
  height: 60%;
  overflow: hidden;
}
.card__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}
.card__text{
  width: 100%;
  height: 30%;
  padding: 0px 20px;
  box-sizing: border-box;
  background-color: #ffffff;
}
</style>

</head>
<body t.........完整代码请登录后点击上方下载按钮下载查看