本文链接：https://blog.csdn.net/hlx20080808/article/details/108407673

效果:

页面

<body>

		<div id="box">

			<!--one-->
			<div class="teach">
				<!--图片-->
				<div class="pic">
					<img src="image/r3_jxyf_03.jpg" />
				</div>
				<!--文字-->
				<div class="txt">
					<dl>
						<dt>总监级师资</dt>
						<dd>打造复合型互联网高端技术人才</dd>
					</dl>
				</div>
			</div>
			<!--two-->
			<div class="teach">
				<!--图片-->
				<div class="pic">
					<img src="image/r3_jxyf_05.jpg" />
				</div>
				<!--文字-->
				<div class="txt">
					<dl>
						<dt>大咖师资</dt>
              			<dd>云集国内外-线互联网企业专家</dd>
					</dl>
				</div>
			</div>
			
			<!--three-->
			<div class="teach">
				<!--图片-->
				<div class="pic">
					<img src="image/r3_jxyf_07.jpg" />
				</div>
				<!--文字-->
				<div class="txt">
					<dl>
						<dt>课工场学习科学研究院</dt>
              			<dd>助力课程研发，提升学员就业</dd>
					</dl>
				</div>
			</div>
			
			<!--four-->
			<div class="teach">
				<!--图片-->
				<div class="pic">
					<img src="image/r3_jxyf_09.jpg" />
				</div>
				<!--文字-->
				<div class="txt">
					<dl>
						<dt>智慧教材</dt>
              			<dd>多所211高校授课教材首选</dd>
					</dl>
				</div>
			</div>
			
		</div>
	</body>

样式:

		/*去掉边界,水平居中*/
			*{
				margin: 0px;
				padding: 0px;
				margin: 0px auto;
			}
		
		   /*最大层*/
			#box {
				/*弹性布局*/
				display: flex;
				justify-content:center;
				width: 10%;
				/*父-相对定位*/
				position: relative;
			}
			
		   /*第二个层*/
			.teach {
				color: white;
				width: 220px;
				height: 315px;
				/*父-相对定位*/
				position: relative;
				/*过渡效果*/
				transition: all 1s linear;
				margin-right: 35px;
			}
			/*图片放大是必须隐藏*/
			.pic {
				overflow: hidden;
			}
			
			/*文本*/
			.txt {
				color: black;
				/*透明度*/
				opacity: 0.9; 
				 /*大小*/
				width: 220px;
				height: 58px;
				/*背景有点透明度*/
				background: rgba(255, 255, 255, 0.8);
				/*子-绝对定位：文字要在图片上*/
				position: absolute;
				bottom: 0px;
			}
			
			.txt dl {
				margin-top: 5px;
				line-height: 22px;
			}
			
			
			.txt dt {
				/*缩进*/
				text-indent: .8em;
				font-weight: bolder;
				font-size: 16px;
			}
			
			.txt dd {
				text-indent: 1.2em;
				font-size: 12px;
			}
			
			/*整个层*/	
			.teach:hover {
				/*向上平移*/
				transform: translateY(-15px);
				/*阴影*/
				box-shadow: 0px 0px 15px grey;
			}
			/*图片*/			
			.teach:hover img {
				z-index: 1;
				/*过渡*/
				transition: all 1s linear;
				/*放大*/
				transform: scale(1.2);
			}