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

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

代码语言：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-p.........完整代码请登录后点击上方下载按钮下载查看