纯CSS鼠标从不同方向滑入图片产生不同的图片标题效果

查看演示 下载地址

上一篇文章中我们介绍了如何使用CSS3制作图片开门展示标题特效。鼠标滑过图片展示图片标题的方法有无数种，在这篇文章中我们将介绍一种更为炫酷的展现图片标题的技术。这种技术能够感知鼠标进入图片的方向，鼠标从不同方向进入图片时产生的图片标题效果都是不一样的。

这个CSS图片标题效果的HTML结构非常简单：使用一个div来包裹用于制作图片标题的span元素和图片。

<div class="multi-hover">     <span>Born Iman Abdulmajid, 1955span>     <span>First appearance: <cite>Voguecite>, 1976span>     <span>Also known as: Imanspan>     <span>Actress in: <cite>Star Trek VIcite>span>     <img src="img.jpg" alt=""> div>

作为图片标题的span元素里面可以放置任何内容，我们这里使用的是文本，你也可以放置其它的UI元素，甚至是图片。

下面来看看CSS样式，首先要将包裹div.multi-hover设置为相对定位。它里面的元素设置为绝对定位。

div.multi-hover { position: relative; } div.multi-hover img { width: 100%; } div.multi-hover span { position: absolute; width: 100%; height: 100%; text-align: center; box-sizing: border-box; font-size: 2em; transition: .3s linear; color: white; padding: 20%; }

注意：代码中都没有使用浏览器厂商的前缀，你需要为transition添加各个浏览器厂商的前缀来支持旧版本的浏览器。

接下来，我们需要移动各个元素，使它们刚好位于包裹容器div.multi-hover的内部。我们通过百分比单位来移动每一个元素。同时，我们分别给它们设置不同的背景颜色。这些元素可以通过nth-child选择器来得到：

div.multi-hover span:nth-child(1) { top: 0; left: 90%; background: hsla(0,70%,50%,0.6); } /* right */ div.multi-hover span:nth-child(2) { top: -90%; left: 0; background: hsla(90,70%,50%,0.6); } /* top */ div.multi-hover span:nth-child(3) { top: 0; left: -90%; background: hsla(180,70%,50%,0.6); } /* left */ div.multi-hover span:nth-child(4) { top: 90%; left: 0; background: hsla(270,70%,50%,0.6); } /* bottom */

在添加了上面的代码后，如果你的显示器足够大，就可以看到和上图一样的效果。

接下来，我们需要“裁剪”包裹容器div，使超出容器的部分都不可见。

div.multi-hover { position: relative; overflow: hidden; }

最后，我们需要使用opacity属性来隐藏各个元素，然后在鼠标滑过时才显示它们。同样，我们可以使用nth-child来完成这项工作：

div.multi-hover span:hover { opacity: 1; } div.multi-hover span:nth-child(odd):hover { left: 0; } div.multi-hover span:nth-child(even):hover { top: 0; }

本文版权属于jQuery之家，转载请注明出处：http://www./ziliaoku/qianduanjiaocheng/201503021450.html

Previous: 上一篇：使用CSS3制作图片开门展示标题特效