CSS製作滑鼠移動到圖片上圖片會放大的效果

近期發現很多自架的部落格網站,當滑鼠移動到文章的特色圖片時會有圖片放大的效果

要怎麼做到呢?以下是範例參考:

<style type="text/css">

/*自動隱藏超出長寬的圖片*/
.post  {
overflow: hidden;
width: 800px;
height: 600px;
}

/*轉場的時間*/
.post img {
transition: all 0.5s ease 0s;
}

/*判斷滑鼠的動作放大圖片還有增加透明度*/
.post img:hover {
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: .5;
}
</style>

 

<div class="post">
<img src="圖片網址" width="800" height="600" alt=""/>
</div>

CSS製作滑鼠移動到圖片上圖片會放大的效果
關於作者 多力哥
CSS製作滑鼠移動到圖片上圖片會放大的效果
影像創作攝影師/網頁動畫設計師/系統網路工程師/水草研究生
大學畢業後為網站動畫設計師,並副修MIS管理公司伺服器,2004年開始接觸單眼相機,2008年正式成為婚禮攝影師,目前主力為Canon5D4。2016年愛上美麗的水草缸,每天在電腦前修圖之餘還能看看綠油油的水草享受放鬆一下^^
連絡信箱:[email protected]
DORIGO IMAGE 攝影工作室:http://www.dorigo-image.com
若您喜歡這篇文章,歡迎按讚分享喔!
7 回復
  1. Ronal
    Ronal says:

    你好,謝謝你的分享,剛剛試了上面的語法,不過圖片一直跑在左邊,請問有辦法可以讓多張圖片並列但還是整體置中嗎,請問我的center要加在哪裡呢

    回覆
  2. J
    J says:

    謝謝您的分享!
    想請教一下,希望滑動到圖片上時,除了圖片以外的地方全部變暗,要怎麼處理?
    再次謝謝!!!

    回覆
  3. LULUOU
    LULUOU says:

    您好,非常感謝您的分享!!!!!!!
    請問如果我想要把圖片並排並且有這個效果的話,要這麼編寫呢?
    試了好久都不行><

    回覆
    • 多力哥
      多力哥 says:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      <style type="text/css">

      /*自動隱藏超出長寬的圖片*/
      .post  {
      overflow: hidden;
      width: 100%;
      height: 600px;
      }

      /*轉場的時間*/
      .post img {
      transition: all 0.5s ease 0s;
      float:left;
      margin:10px;
      }

      /*判斷滑鼠的動作放大圖片還有增加透明度*/
      .post img:hover {
      -moz-transform: scale(1.05);
      -ms-transform: scale(1.05);
      -o-transform: scale(1.05);
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
      opacity: .5;
      }
      </style>

      <div class="post">
      <img src="圖片網址" width="400" height="300" alt=""/>
      <img src="圖片網址" width="400" height="300" alt=""/>
      </div>
      回覆

發表評論

想要留言嗎?
歡迎歡迎!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *