JDX-01練習說明:網站設計整合

(四)CSS中【:before】與【data-*】結合

(A)html說明

(B)html結構

<section>
    <h1>section02</h1>
    <div>
        <a href="#" data-alt="gril01"><img src="images/gril01.jpg" alt="流行01"></a>
        <a href="#" data-alt="gril02"><img src="images/gril02.jpg" alt="流行02"></a>
        <a href="#" data-alt="gril03"><img src="images/gril03.jpg" alt="流行03"></a>
        <a href="#" data-alt="gril04"><img src="images/gril04.jpg" alt="流行04"></a>
        <a href="#" data-alt="gril05"><img src="images/gril05.jpg" alt="流行05"></a>
        <a href="#" data-alt="man01"><img src="images/man01.jpg" alt="流行06"></a>
        <a href="#" data-alt="man02"><img src="images/man02.jpg" alt="流行07"></a>
        <a href="#" data-alt="man03"><img src="images/man03.jpg" alt="流行08"></a>
        <a href="#" data-alt="man04"><img src="images/man04.jpg" alt="流行09"></a>
        <a href="#" data-alt="man05"><img src="images/man05.jpg" alt="流行10"></a>
    </div>
</section>

(C)CSS美化

section:nth-of-type(2){ text-align: center;}
section:nth-of-type(2) a{ position: relative; color: aliceblue; display: inline-block; margin: 20px;
                            overflow: hidden;
                            border-radius: 20px; box-shadow:0 0 10px #000;}
section:nth-of-type(2) a:before{content:attr(data-alt) attr(href); background: rgba(0,0,0,.6);
                                position: absolute; left: 0; bottom: -50px;
                                width: 100%; height: 50px; line-height: 50px; text-align: center;
                                transition: all .5s; z-index: 99;}
section:nth-of-type(2) a:hover:before{ bottom: 0;}
section:nth-of-type(2) img{display: block; transition: all .5s;}

section:nth-of-type(2) a:hover img{transform: scale(1.1);}

CSS美化重點: