鍍金池/ 問答/HTML5  HTML/ 鼠標(biāo)移動(dòng)到 DIV ,內(nèi)部圖片放大,怎么實(shí)現(xiàn)呢

鼠標(biāo)移動(dòng)到 DIV ,內(nèi)部圖片放大,怎么實(shí)現(xiàn)呢

1.比如這個(gè) 鏈接 的效果

2.查看元素,沒有發(fā)現(xiàn) hover 之類的屬性。
3.如果是使用js實(shí)現(xiàn),怎么捕捉它的函數(shù)呢?
圖片描述

如圖所示,勾選 hover 動(dòng)作之后,圖片會(huì)放大

回答
編輯回答
雅痞

clipboard.png

這不是有嗎?

2017年10月3日 18:56
編輯回答
糖果果

直接貼代碼吧

html部分

<div class="case-item">
  <img src="http://www.daocloud.io/assets/images/pufa-case.jpg" alt="">
  <p class="icon-center">查看案例</p>
</div>

css部分

.case-item{
  width: 600px;
  height: 280px;
  overflow: hidden;
}

.case-item img{
  width: 100%;
  height: 100%;
  transition:all .3s ease 0s;
  transform:scale(1);
}

.case-item:hover img{
  transform:scale(1.2);
}
2017年7月4日 07:22