HTML and CSS Reference
In-Depth Information
alt=”Some of our cool shoes” />
<a class=”button purchase” href=”#” title=”Purchase product”>
More Information
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.
Search WWH ::

Custom Search