5种CSS3鼠标悬停图片动画特效

当前位置:主页 > CSS3库 > CSS3动画 > 5种CSS3鼠标悬停图片动画特效
5种CSS3鼠标悬停图片动画特效
分享:

    插件介绍

    这是一款CSS3鼠标悬停图片动画特效。该特效共5种效果,它们在鼠标悬停在图片上方时,通过CSS3 transition和transform来制作遮罩层和文字的动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2018-11-05
    阅读:
简要教程

这是一款CSS3鼠标悬停图片动画特效。该特效共5种效果,它们在鼠标悬停在图片上方时,通过CSS3 transition和transform来制作遮罩层和文字的动画效果。

使用方法

在页面中引入material-icons.min.css和style.css文件。

<link href="css/material-icons.min.css" rel="stylesheet">  
<link href="css/style.css" rel="stylesheet">  
                
HTML

基本HTML结构如下:

<div class="portfolio-item portfolio-effect__item portfolio-item--eff2">
  <img class="portfolio-item__image" src="eff-5.jpg" alt="Portfolio Item" width="826" height="551">
  <div class="portfolio-item__info">
    <h3 class="portfolio-item__header">Web Development</h3>
    <div class="portfolio-item__links">
      <div class="portfolio-item__link-block">
        <a class="portfolio-item__link" href="#" title="Link Title">
          <i class="material-icons">link</i>
        </a>
      </div>
      
      <div class="portfolio-item__link-block">
        <a class="portfolio-item__link" href="#" title="Link Title">
          <i class="material-icons">search</i>
        </a>
      </div>
    </div>
  </div>
</div>
                

该CSS3鼠标悬停图片动画特效的github网址为:https://github.com/eisenfox/portfolio-hovers-css3