css 鼠标悬停之后的图片放大、文字上拉动态效果

直接上效果图：

用到的CSS知识点

1. transition css过渡
2. transform 转换
3. linear-gradient 线性渐变

当进入父元素之后触发子元素的hover,可以这样写:
父类:hover 子类{} .all:hover .imag{}

vue的template如下：
看嵌套关系就好了

<template>
	<div>
		<div class="title text-left">{{basic.title}}</div>
		<div class=" d-flex flex-row ">
			<div v-for="(item,index) in content">
				<div class="all" @click="Jump(content[index].url)" :style="{width:items.width,height:items.height,'border-radius':basic.radius}">
					<div class="imag" :style="{width:items.width,height:items.height,'background-image': 'url('+item.pic+')',}">
					</div>
					<div class="btngo">{{basic.btn}}</div>
					<div class="content">
						<div class="d-flex flex-row justify-content-between">
							<div class="">{{item.author}}</div>
							<div class="">播放{{item.cout}}</div>
						</div>
						<div class="text-left introduce">{{item.introduce}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

/* 标题 */
	.title {
		margin: 0;
		font-size: 24px;
		color: #000;
		line-height: 33px;
		font-weight: 400;
	}

	/* 主体 */
	.all {
		position: relative;
		overflow: hidden;
		margin: 18px 10px 10px 10px;
		cursor: pointer
	}

	/* 设置底图样式 */
	.imag {
		background-repeat: no-repeat;
		background-size: cover;
		transition: transform .8s;
	}

	/* 鼠标进入该区域 图片放大1.2倍 */
	.all:hover .imag {
		transform: scale(1.2);
	}

	/* 个人信息的渐变背景 */
	.content {
		width: 100%;
		height: 64px;
		z-index: 2;
		color: #fff;
		padding: 9px 10px;
		font-size: 14px;
		position: absolute;
		left: 0%;
		top: 82%;
		transition: transform .8s;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
	}

	/* 鼠标进入该区域  向上移25px */
	.all:hover .content {
		transform: translateY(-25px);
	}

	/* 个人描述 */
	.introduce {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 6px;
	}

	/* 按钮样式 */
	.btngo {
		position: absolute;
		left: 60%;
		top: 5%;
		height: 24px;
		width: 68px;
		padding: 0 10px;
		line-height: 24px;
		color: #fff;
		background-color: #ff5e90;
		border-radius: 4px;
		white-space: nowrap;
		overflow: hidden;
	}

如果有什么问题或者bug可以提出来哦！！！！

1、关于transition的属性值，可以参考这篇文章：
https://blog.csdn.net/actorwen/article/details/78799415
2、关于transform，可以参考这篇文章：
https://www.jianshu.com/p/80f6051389bd
3、关于渐变效果的可以参考这篇文章
https://www.cnblogs.com/dodocie/p/7132459.html