注冊/登錄,歡迎光臨!
加入收藏設為首頁網站地圖
您當前的位置:辛勤IT網 >> 網頁設計 >> DIV+CSS >> css3實現鼠標放上去圖片外框不變大,里面中心放大的方法
熱門:word | excel | powerpoint

css3實現鼠標放上去圖片外框不變大,里面中心放大的方法

2019/6/16 16:41:56 所屬分類:網頁設計 - DIV+CSS
內容提要:css3實現鼠標放上去圖片外框不變大,里面中心放大的方法,下面是css3實現鼠標放上去圖片外框不變大,里面中心放大的方法。

  下面是css3實現鼠標放上去圖片外框不變大,里面中心放大的方法。

  <div class="img-box">
  <img src="img/index_11.png" class="img">
  </div>

  css代碼:

.img-box{ width: 390px;
height: 296px;
overflow: hidden; //這個一定要加上,不然就不是外框不變里面變大了
}

.img{
display: block;
width: 100%;
height: 100%;
transition: all 1s;
}

.img:hover{ transform: scale(1.4); //放大倍數隨意
}

網頁設計 | DIV+CSS
最近更新
推薦信息
關于我們 | 聯系方式 | 對話本站 | 版權聲明 | 所有信息
福建体彩31选7走势图开奖7