页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

超多CSS图像文字hover动画效果

图像相册 HTML我帮您 1年前  次浏览

CSS  Hover 在网页设计中是极为常用的一个 CSS 效果,只要你有创造力,都可以让 Hover 变得更多姿多彩,今天我们主要分享50多款使用 CSS HOVER 完成的图像效果,喜欢的可以下载下来使用哦。

超多CSS图像文字hover动画效果

使用教程

该样式目前拥有40多种,使用也十分简单,参照下面的步骤制作即可。

Step 1: 引入CSS样式表文件

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

Step 2: 参照下面的HTML结构

<figure class=”imghvr-fade”>
  <img src=”#”>
  <figcaption>
    // Hover 内容
  </figcaption>
</figure>

其中imghvr-fade就是对应的 CSS hover 效果,这个 Class 名称可以到演示页获得。

修改 Hover 的背景颜色

打开 CSS 文件,把以下代码修改自定的颜色值即可。

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

当然,如果你只想单独修改某一个,那么在 HTML 文件下,直接加入 style 样式,或单独写一个 class。

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

兼容性

Imagehover.css 在很大程度上依赖 CSS3特色,包括伪元素、动画、过渡等等,所以一般支持 CSS3 的浏览器都可以兼容。

相关链接

发表评论