jquery悬停标题动画效果

下载地址

网格和数据结构将一个无序列表,每个项目将包含一个图元素。图将包含一个图像和figcaption一些文本元素和链接:

• 

  Camera

  Jacob Cummings Take a look

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; }}

dd: