css+div实现横向团队人物介绍鼠标悬浮动画点击弹出文字效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：css+div实现横向团队人物介绍鼠标悬浮动画点击弹出文字效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');

/*
=====
TEAMY CORE STYLES
=====
*/

.teamy__layout{
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.teamy__layout::before{
	content: "";
	background-color: var(--teamy-back-background-color, rgba(0, 0, 0, .7));
	opacity: 0;

	position: absolute;
	z-index: 1;
}

.teamy__avatar{
	display: block;
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

.teamy__back{
	display: flex;
	padding: var(--teamy-back-padding, 1.25rem);

	position: absolute;
	inset: 0; 
	z-index: 1;
}

.teamy__back-content{
	opacity: 0;
	margin: auto;
}

.teamy__back-content:focus-within,
.teamy:hover .teamy__back-content{
	opacity: 1;
}

/*
=====
TEAMY MASKS BASICS
=====
*/

/* circle */

.teamy_mask-circle .teamy__layout::before{
	block-size: 100%;
	aspect-ratio: 1 / 1;
	clip-path: circle(50% at 50% 50%);
}

/* triangle */

.teamy_mask-triangle .teamy__layout::before{
	block-size: 100%;
	inline-size: 100%;
	clip-path: polygon(0 100%, 50% 0, 50% 0, 100% 100%);
}

.teamy_mask-triangle:hover .teamy__layout::before,
.teamy_mask-triangle:focus-within .teamy__layout::before{
	opacity: 1;
}

/*
=====
TEAMY MASKS VARIETIES
=====
*/

/* circle */

.teamy_mask-circle .teamy__layout::before{
	transform: translate(-50%, -50%) scale(0);
	inset-block-start: 50%;
	inset-inline-start: 50%;
}

.teamy_mask-circle:hover .teamy__layout::before,
.teamy_mask-circle:focus-within .teamy__layout::before{
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.3);
}

/* triangle */

.teamy_mask-triangle .teamy__layout::before{
	inset-block-end: 0;
	inset-inline-start: 0;
}

/*
=====
TEAMY ANIMATIONS
=====
*/

@media (prefers-reduced-motion: no-preference){

	/* circle */

	.teamy_mask-circle .teamy__layout::before{
		transition: transform .3s ease, opacity .3s ease-out;
		will-change: opacity, transform;
	}

	.teamy_mask-circle:hover .teamy__layout::before,
	.teamy_mask-circle:focus-within .teamy__layout::before{
		transition-duration: .6s;
	}

	/* triangle */

	.teamy_mask-triangle .teamy__layout::before{
		transition-property: clip-path, opacity;
		transition-duration: .2s, .4s;
		transition-delay: .4s, 0s;
		transition-timing-function: ease-out;

		will-change: clip-path, opacity;
	}

	.teamy_mask-triangle:hover .teamy__layout::before,
	.teamy_mask-triangle:focus-within .teamy__layout::before{
		clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
		transition-delay: 0s;
		transition-duration: .4s;
	}

	/* zoom preview */

	.teamy_zoom-photo .teamy__avatar{
		transition: transform .4s cubic-bezier(0.71, 0.05, 0.29, 0.9);
		will-change: transform;
		transform: scale(1);
	}

	.teamy_zoom-photo:hover .teamy__avatar,
	.teamy_zoom-photo:focus-within .teamy__avatar{
		transform: scale(1.2);
	}

	/* zoom and rotate preview */

	.teamy_zoom-rotate-photo .teamy__avatar{
		transition: transform .4s cubic-bezier(0.71, 0.05, 0.29, 0.9);
		will-change: transform;
		transform: scale(1) rotate(0);
	}

	.teamy_zoom-rotate-photo:hover .teamy__avatar,
	.teamy_zoom-rotate-photo:focus-within .teamy__avatar{
		transform: scale(1.2) rotate(5deg);
	}

	/* zoom and slide preview */

	.teamy_zoom-slide-photo .teamy__avatar{
		transition: transform .4s cubic-bezier(0.71, 0.05, 0.29, 0.9);
		will-change: transform;
		transform: scale(1) translate(0, 0);
	}

	.teamy_zoom-slide-photo:hover .teamy__avatar,
	.teamy_zoom-slide-photo:focus-within .teamy__avatar{
		transform: scale(1.2) translate(4%, 4%);
	}

	/* content animation */

	.teamy__back-content:focus-within,
	.teamy:hover .teamy__back-content{
		transition: opacity .4s cubic-bezier(0.71, 0.05, 0.29, 0.9) ..........完整代码请登录后点击上方下载按钮下载查看