3 COOL CSS3图像悬停效果

塞缪尔诺顿 经过 塞缪尔诺顿  |  2015年2月17日

在现代网络上,有许多技术可用于创造有趣的交互,但最简单和最优雅通常是CSS,以及CSS3附带的添加。

回到过去,我们必须依靠JavaScript进行这种效果,但由于越来越多地对浏览器的CSS3的支持,现在可以设置这样的效果,而不是任何脚本。遗憾的是仍然存在不支持CSS3的浏览器(IE9及以下),因此您要么需要一个旧版浏览器的回退或将其效果视为渐进式增强。

今天,我们将看看我们如何应用酷,而是巧妙的悬停效应来显示和隐藏图像标题。

如果您愿意与代码一起关注,您可以 在此处下载文件。

 

Demo 1

第一个演示是我们最简单的:图像将飞向右侧揭示标题的权利。

标记

对于我们的第一个演示的HTML,我们将使用无序列表,然后将标题和图像中的标题包裹起来。请注意,我们还将添加课程 demo-1影响 在无序列表标记内。标记看起来像这样:

<ul class="demo-1 effect">
    <li>
            <h2>This is a cool title!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
    </li>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

CSS..

对于我们的CSS,我们将设置 相对的 定位我们的 demo-1 班级然后设置了 宽度高度。我们还将隐藏溢出的元素。一世’我也为我的一些基本风格 h2p 标签以及我的图像标记。现在,对于我们的效果等级,我们将设置定位 绝对 并给它一个 利润 -15px到顶部和底部。我们将使用CSS3的 过渡 创造平滑效果。我们的CSS看起来像这样:

.demo-1 {
    position:relative;
    width:300px; 
   height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-1 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-1 h2 {
    font-family:'Lato';
    font-size:20px;
    line-height:24px;
    margin:0;
}
.effect img {
    position:absolute;
    margin:-15px 0;
    right:0;
    top:0;
    cursor:pointer;
    -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
    -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
    -o-transition:top .4s ease-in-out,right .4s ease-in-out;
    transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
    top:-230px;
    right:-330px;
    padding-bottom:200px;
    padding-left:300px
}

 

Demo 2

我们的第二个演示将显示图像滑动。这意味着当您将鼠标悬停在图像上时,标题将在其上方显示。

标记

对于我们的第二个演示的HTML,我们将使用非常相似的标记到我们的第一个演示。但这一次我们会使用 demo-2 作为班级,并添加了 class:

<ul class="demo-2 effect">
    <li>
       <h2 class="零">This is a cool title!</h2>
       <p class="零">Lorem ipsum dolor sit amet.</p>
    </li>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

CSS..

我们的CSS与第一个演示几乎相同,除了这次我们将通过设置向下移动我们的图像 底部 到-96px。我们还会使用CSS3的 过渡 要创建平滑效果:

.demo-2 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-2 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-2 h2 {
    font-size:20px;
    line-height:24px;
    margin:0;
    font-family:'Lato'
}
.effect img {
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    margin:-12px 0;
    -webkit-transition:bottom .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out;
    -o-transition:bottom .3s ease-in-out;
    transition:bottom .3s ease-in-out
}
.effect img.top:hover {
    bottom:-96px;
    padding-top:100px
}
h2.zero,p.zero {
    margin:0;
    padding:0
}

 

Demo 3

对于我们的最后一个演示,我们将创建一个翻转卡效果。这意味着当您将鼠标悬停在图像上时,它将在其轴上旋转它以显示描述。

标记

对于我们的最后一个演示标记,我们’ll使用不同的结构。首先,我们’ll use the HTML5 数字 元素与a一起 图标题 在它里面标记。我们也会使用 demo-3 我们无序列表的课程:

<ul class="demo-3">
    <li>
        <figure>
            <img src="images/image1.jpg" alt=""/>
            <figcaption>
                <h2>This is a cool title!</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
            </figcaption>
        </figure>
    </li>
</ul>

CSS..

在我们的CSS中,我们将将图形图像设置为 相对的 位置然后隐藏 背面可见性。我们’ll also use the 旋转 变换:-180度 图雅蒂芬 然后将其更改为180度,以便悬停图像和标题:

.demo-3 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px
}
.demo-3 figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}
.demo-3 figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0
}
.demo-3 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.demo-3 figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left
}
.demo-3 figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}
.demo-3 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}