使用时要在页面中引入imagehover.css或imagehover.min.css文件。
1 | < link type = "text/css" rel = "stylesheet" href = "css/imagehover.min.css" /> |
HTML结构
在页面中使用下面的HTML结构,图片的src指向你需要的图片,Hover Content是鼠标滑过时显示的内容,可以自定义。在<figure>元素中,你可以将class设置为一种你需要的鼠标滑过图片效果的class类。
1 2 3 4 5 6 7 | < figure class = "imghvr-fade" > < img src = "#" > < figcaption > // Hover Content </ figcaption > < a href = "#" ></ a > </ figure > |
imagehover.css可用的鼠标滑过图片效果的class类有:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | imghvr-fade imghvr-push-up imghvr-push-down imghvr-push- left imghvr-push- right imghvr-slide-up imghvr-slide-down imghvr-slide- left imghvr-slide- right imghvr-reveal-up imghvr-reveal-down imghvr-reveal- left imghvr-reveal- right imghvr-hinge-up imghvr-hinge-down imghvr-hinge- left imghvr-hinge- right imghvr-flip-horiz imghvr-flip-vert imghvr-flip-diag -1 imghvr-flip-diag -2 imghvr-shutter-out-horiz imghvr-shutter-out-vert imghvr-shutter-out-diag -1 imghvr-shutter-out-diag -2 imghvr-shutter-in-horiz imghvr-shutter-in-vert imghvr-shutter-in-out-horiz imghvr-shutter-in-out-vert imghvr-shutter-in-out-diag -1 imghvr-shutter-in-out-diag -2 imghvr-fold-up imghvr-fold-down imghvr-fold- left imghvr-fold- right imghvr-zoom-in imghvr-zoom-out imghvr-zoom-out-up imghvr-zoom-out-down imghvr-zoom-out- left imghvr-zoom-out- right imghvr-zoom-out-flip-horiz imghvr-zoom-out-flip-vert imghvr-blur |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com