Home > Article > Web Front-end > HTML5 CSS3 special topic Detailed explanation of sample code for creating photo album effect using pure CSS

HTML5 CSS3 special topic Detailed explanation of sample code for creating photo album effect using pure CSS

黄舟Original: 2017-03-09 16:31:292182browse

HTML5 CSS3 Special Topic Detailed explanation of the sample code for creating a photo album effect with pure CSS:

I accidentally found such an example on my computer today. I think the effect is pretty good. I don’t remember when I downloaded it. Yes, I haven’t used w3cfuns for a long time. I miss the days of learning the front desk, so I would like to share it with you.

Rendering:

#The effect is still very good. The most important thing is that no line of js is used. This is Highlights.

Look at the html file first:

<body>

<p id="gallery">
    <h1>纯CSS3相册效果</h1>
    <ul>

        <li>
            <span class="touch"><img src="images/pic1.jpg"/></span>

            <p style="display: block;">
                <img src="images/pic1.jpg"/>
            </p>
        </li>

        <li>
            <span><img src="images/pic2.jpg"/></span>

            <p>
                <img src="images/pic2.jpg"/>
            </p>
        </li>
        <li>
            <span><img src="images/pic3.jpg"/></span>

            <p>
                <img src="images/pic3.jpg"/>
            </p>
        </li>

        <li>
            <span><img src="images/pic4.jpg"/></span>

            <p>
                <img src="images/pic4.jpg"/>
            </p>
        </li>

        <li>
            <span><img src="images/pic5.jpg"/></span>

            <p>
                <img src="images/pic5.jpg"/>
            </p>
        </li>


    </ul>

    <p class="clearfix"></p>
</p>


</body>

Describe briefly:

##1 , li in ul determines the number of photos

2. ul uses the style float:right, width:140px; to display it in the right area of the album

3. li's float: left , so that li can float left; if the p of the large image stored in li is absolute, it will be positioned according to p#gallary. By default, only the first one displays

4. When the mouse moves to li, change li The transparency of span img and the display of lip will display the large image

The next step is the css file:

<style type="text/css">

        body
        {
            font-family: "微软雅黑";
        }

        #gallery
        {
            width: 700px;
            position: relative;
            margin: 20px auto 0;
            background-color: #000;
            min-height: 400px;
            padding: 20px;
        }

            /*标题*/
        #gallery h1
        {
            color: #fff;
            font-size: 2em;
            font-weight: bold;
        }

        #gallery ul
        {
            width: 140px;
            float: right;
            margin: 10px 0 20px;
        }

        #gallery ul li
        {
            float: left;
            margin: 20px 8px 0 0;
        }

        #gallery ul li span
        {
            display: block;
            position: relative;
            width: 60px;
            height: 80px;
            border: 1px solid #fff;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
            border-radius: 4px;
            overflow: hidden;
        }

        #gallery  ul li span img
        {
            position: relative;
            top: -200px;
            left: -100px;
            filter: alpha(opacity=30);
            opacity: 0.3;
        }

        #gallery ul li span.touch img, #gallery ul li:hover span img
        {
            opacity: 1;
            filter: alpha(opacity=100);
        }

        #gallery ul li:hover p
        {
            display: block;
        }

        #gallery ul li p  img
        {
            width: 460px;
            height: 288px;
        }

        #gallery ul li p
        {
            display: none;
            position: absolute;
            top: 100px;
            left: 30px;
            border: 5px solid #fff;
        }

        .clearfix
        {
            clear: both;
        }


    </style>

There are no complicated styles in css, so I won’t describe them here. In addition, I introduced a reset style css, reset.css, in the html. You can also use your own reset style:

html, body, p, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins,
 kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend{
	margin: 0;
	padding: 0;
	font-size: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	}
	
ol, ul {
	list-style: none;
	}

blockquote, q {
	quotes: none;
	}

:focus {
	outline: 0;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
	}

The above is the detailed content of HTML5 CSS3 special topic Detailed explanation of sample code for creating photo album effect using pure CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of graphic and text code for building a high-performance parallax website using HTML5Next article：Detailed explanation of graphic and text code for building a high-performance parallax website using HTML5

See more

HTML5 CSS3 special topic Detailed explanation of sample code for creating photo album effect using pure CSS

Related articles