图片/图形

CSS3鼠标悬停图片动画特效

面包多

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

使用方法:

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

也想出现在这里?联系我们
创客主机
  1. <link href="css/material-icons.min.css" rel="stylesheet">  
  2. <link href="css/style.css" rel="stylesheet">

HTML 代码:

基本 HTML 结构如下:

  1. <div class="portfolio-item portfolio-effect__item portfolio-item--eff2">
  2.   <img class="portfolio-item__image" src="eff-5.jpg" alt="Portfolio Item" width="826" height="551">
  3.   <div class="portfolio-item__info">
  4.     <h3 class="portfolio-item__header">Web Development</h3>
  5.     <div class="portfolio-item__links">
  6.       <div class="portfolio-item__link-block">
  7.         <a class="portfolio-item__link" href="#" title="Link Title">
  8.           <i class="material-icons">link</i>
  9.         </a>
  10.       </div>
  11.  
  12.       <div class="portfolio-item__link-block">
  13.         <a class="portfolio-item__link" href="#" title="Link Title">
  14.           <i class="material-icons">search</i>
  15.         </a>
  16.       </div>
  17.     </div>
  18.   </div>
  19. </div>

github 网址:https://github.com/eisenfox/portfolio-hovers-css3

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!