介绍
imagehover.css 是一款可以实现图片悬停效果的纯 CSS 库，它提供了多种预设样式和自定义选项，可以快速地为网站添加炫酷的图片交互效果。
本文将介绍如何使用 npm 包安装 imagehover.css，以及如何配置和使用它来创建各种图片悬停效果。
准备工作
在开始之前，请确保你已经安装了 Node.js 和 npm。如果你还没有安装，可以从官方网站 https://nodejs.org/ 下载并安装。
安装
使用 npm 可以非常方便地安装 imagehover.css，只需打开终端并运行以下命令：
npm install imagehover.css
使用
导入样式表
要使用 imagehover.css，首先需要将其样式表导入到项目中。你可以通过以下方式将它添加到 HTML 文件中：
<link rel="stylesheet" href="node_modules/imagehover.css/css/imagehover.min.css">
基本用法
要在图片上应用 imagehover.css 效果，只需将其类名添加到 img 元素的父元素上。例如，如果你想在一个 div 内添加一个 zoom-in 效果的图片，可以这样写：
<div class="ih-item square effect13 from_left_and_right"><img src="path/to/image.jpg"></div>
预设效果
imagehover.css 提供了多种预设效果，每个效果都有不同的类名。以下是一些常用的类名及其对应的效果：
effect1- 展开effect2- 侧滑effect3- 翻转effect4- 吸入effect5- 抖动effect6- 扩散effect7- 缩小effect8- 上推effect9- 下拉effect10- 左推effect11- 右推effect12- 淡入淡出effect13- 缩放
你可以将上述任意一个类名添加到 img 元素的父元素中，以应用相应的效果。
自定义选项
除了预设效果之外，你还可以通过添加自定义类名来配置 imagehover.css 的效果。以下是一些常用的自定义类名及其对应的效果：
from_left- 从左侧滑入from_right- 从右侧滑入from_top- 从顶部滑入from_bottom- 从底部滑入from_left_and_right- 从左右两侧同时滑入from_top_and_bottom- 从顶底两端同时滑入flip_up- 翻转并向上滑入flip_down- 翻转并向下滑入flip_left- 翻转并向左滑入flip_right- 翻转并向右滑入
你可以将任意自定义类名与预设效果类名组合使用，以创建更多样化的效果。例如，要创建一个从左侧滑入并带有缩放效果的图片，可以这样写：
<div class="ih-item square effect13 from_left"><img src="path/to/image.jpg"></div>
示例代码
以下是一个使用 imagehover.css 的示例代码，其中包括了几种不同的效果：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>imagehover.css 示例</title>
<link rel="stylesheet" href="node_modules/imagehover.css/css/imagehover.min.css">
<style>
.item
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/35301) ，转载请注明来源
本文地址：[https://www.javascriptcn.com/post/35301](https://www.javascriptcn.com/post/35301)