上一篇文章中我们介绍了如何使用CSS3制作图片开门展示标题特效。鼠标滑过图片展示图片标题的方法有无数种,在这篇文章中我们将介绍一种更为炫酷的展现图片标题的技术。这种技术能够感知鼠标进入图片的方向,鼠标从不同方向进入图片时产生的图片标题效果都是不一样的。
这个CSS图片标题效果的HTML结构非常简单:使用一个div
来包裹用于制作图片标题的span
元素和图片。
< div class = "multi-hover" > < span >Born Iman Abdulmajid, 1955
|
作为图片标题的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 : . 3 s 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 ; } |
联系客服