jquery悬停标题动画效果

网格和数据结构将一个无序列表,每个项目将包含一个图元素。图将包含一个图像和figcaption一些文本元素和链接:
<ul class="grid cs-style-1">
    <li>
        <figure>
            <img src="images/1.png" alt="img01">
            <figcaption>
                <h3>Camera</h3>
                <span>Jacob Cummings</span>
                <a href="http://dribbble.com/shots/1115632-Camera">Take a look</a>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <!-- ... -->
        </figure>
    </li>
    <!-- ... -->
</ul>

CSS
注意,CSS将不会包含任何特定的前缀,但你会发现他们在文件。
常见的样式的所有数据如下。首先,我们将为网格和定义的样式列表项的容器将作为我们的数据:
.grid {
    padding: 20px 20px 100px 20px;
    max-width: 1300px;
    margin: 0 auto;
    list-style: none;
    text-align: center;
}
 
.grid li {
    display: inline-block;
    width: 440px;
    margin: 0;
    padding: 20px;
    text-align: left;
    position: relative;
}
使列表项显示为inline-blocks将允许我们中心他们应用centerd text-align父。
让我们重置的边缘图元素和设置位置相对的。我们figcaption将绝对定位,因此我们需要确保它将这样做的图:
.grid figure {
    margin: 0;
    position: relative;
}
图像会有100%的最大宽度将派上用场,当我们定义一个媒体查询调整列表项:
.grid figure img {
    max-width: 100%;
    display: block;
    position: relative;
}
figcaption将绝对定位。默认情况下它将定位在左上角。我们不定义任何宽度或高度在这里我们将在所有的个人风格:
.grid figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    background: #2c3f52;
    color: #ed4e6e;
}
最后,让我们定义一些样式文本元素和链接:
.grid figcaption h3 {
    margin: 0;
    padding: 0;
    color: #fff;
}
 
.grid figcaption span:before {
    content: 'by ';
}
 
.grid figcaption a {
    text-align: center;
    padding: 5px 10px;
    border-radius: 2px;
    display: inline-block;
    background: #ed4e6e;
    color: #fff;
}

最后我们的CSS我们还将添加一个媒体查询屏幕更小:
@media screen and (max-width: 31.5em) {
    .grid {
        padding: 10px 10px 100px 10px;
    }
    .grid li {
        width: 100%;
        min-width: 300px;
    }
}