效果:
页面
<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); }
