標籤：back href float 感恩 :hover 圖片 png cal eve
今天是感恩節，祝大家感恩節快樂哦！最近天冷了，大家注意保暖喲。下面一起看看小穎寫的demo吧。
html代碼：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>圖片縮放</title> <link rel="stylesheet" href="css/master.css" media="screen"></head><body> <div class="image-body"> <div class="row-first"> <div class="img-first"> <img src="images/one.jpg" alt="狗狗" /> <div class="txt"> 我是小可愛 </div> </div> <div class="img-second"> <img src="images/two.jpg" alt="狗狗" /> <div class="txt"> 我是小可愛 </div> </div> <div class="img-third"> <img src="images/three.jpg" alt="狗狗" /> <div class="txt"> 我是小可愛 </div> </div> </div> <div class="row-second"> <div class="img-first"> <img src="images/four.jpg" alt="狗狗" /> <div class="txt"> 我是小可愛 </div> </div> <div class="img-second"> <img src="images/five.jpg" alt="狗狗" /> <div class="txt"> 我是小可愛 </div> </div> <div class="img-third"> <img src="images/six.jpg" alt="狗狗" /> <div class="txt"> 我是小可愛 </div> </div> </div> <div class="row-third"> <div class="img-first"> <img src="images/seven.jpg" alt="狗狗" /> <div class="txt"> 我是小可愛 </div> </div> <div class="img-second"> <img src="images/eight.jpg" alt="狗狗" /> <div class="txt"> 我是小可愛 </div> </div> <div class="img-third"> <img src="images/nine.jpg" alt="狗狗" /> <div class="txt"> 我是小可愛 </div> </div> </div> </div></body></html>css代碼：
.image-body { padding-left: 157px;}.row-first, .row-second, .row-third { overflow: hidden;}.img-first, .img-second, .img-third { float: left; height: 227px; width: 260px;}.image-body img { width: 200px; height: 180px; z-index: -1; /*z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。*/}.image-body .txt { width: 175px; height: 40px; position: relative; background: url(../images/bg_index_tag.png); left: 20%; top: -80px; display: none; z-index: 9999; cursor: default; /*cursor 屬性規定要顯示的游標的類型（形狀）。*/ padding: 10px 0px 0px 15px;}.img-first:hover .txt, .img-second:hover .txt, .img-third:hover .txt { display: block;}.img-first:hover img, .img-second:hover img, .img-third:hover img { transform: scale(1.5); /*scale(<number>[, <number>])： 指定對象的2D scale（2D縮放）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設取第一個參數的值 */}
CSS實現圖片縮放特效
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
