圖片放上效果ImageHover.css

時間 2019-12-05

標籤圖片放上效果 imagehover.css imagehover css 欄目 CSS 简体版

原文原文鏈接

網頁效果中常常會用到圖片的hover效果，ImageHover.css 這個庫爲咱們提供了多種的效果。javascript

兼容性

插件是使用css3書寫的，因此最好是對css3支持比較好的瀏覽器。若是須要考慮到兼容性問題，那麼建議使用我本身寫的jq版效果，雖然效果單一，可是兼容性更好。css

效果演示地址

`Demo`：http://weber.pub/demo/160919/index.html

下載

直接下載html

連接：http://imagehover.io/java

github 地址css3

github 地址：https://github.com/ciar4n/imagehover.cssgit

Bower 安裝github

bower install imagehover.css

使用

一、在頁面的head 部位引入插件web

<head>
  <link rel="stylesheet" href="css/imagehover.min.css">
</head>

二、HTML代碼瀏覽器

其中figure標籤的class imghvr-fade就是對應的 CSS hover 效果，這個 Class 名稱能夠查看演示頁:http://weber.pub/demo/160919/index.html學習

<figure class="imghvr-fade">
  <img src="#">
  <figcaption>
    // Hover Content
  </figcaption>
</figure>

三、若是圖片上須要添加連接，這時html 代碼以下

<figure class="imghvr-fade">
    <img src="#">
    <figcaption>
      // Hover Content
    </figcaption>
    <a href="http://www.imagehover.io"></a>
</figure>

四、統一修改hover效果的背景顏色

修改 imagehover.css 文件

[class^='imghvr-'],
[class*=' imghvr-'] {
  background-color: #D14233;
}

五、單獨修改某個hover效果代碼

<figure class="imghvr-fade" style="background-color:#D14233;">
    <img src="#">
    <figcaption>
      // Hover Content
    </figcaption>
</figure>

演示地址：http://weber.pub/demo/160919/index.html

部分演示代碼

<div class="demo">
  <figure class="imghvr-zoom-out-down"><img src="example-image.jpg" alt="example-image">
    <figcaption>
      <h3>Weber.pub</h3>
      <p>Web開發者，努力學習中</p>
    </figcaption><a href="javascript:;"></a>
  </figure>
  <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-down</textarea>
</div>