HTML and CSS Reference
In-Depth Information
alt=”Some of our cool shoes” />
</li>
</ul>
<a class=”button purchase” href=”#” title=”Purchase product”>
More Information
</a>
</div>
3.
Save index.html.
This HTML adds two product images to the product showcase (you add a third later), each in its own list item
<li>
, as shown in Figure 14-2. Using CSS, you place one image over the other so only one can be seen at
a time. You then use CSS3 animation properties to make the images cycle between one another.
4.
In styles.css, find the
.showcase .button
rule set and increase the
z-index
from
5
to
9
.
5.
Find the
.showcase .button:hover
rule set, and below it, add these rule sets:
.showcase ul {
background: #009CC8;
position: relative;
z-index: 9;
}
.showcase li {
position: absolute;
top: 0;
width: 100%;
}
.showcase li:first-child {
z-index: 3;
position: relative;
}
.showcase li:nth-child(2) {
z-index: 2;
}
6.
Save styles.css.
