Based on 9 CSS3 mouseover album preview effects_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:42:40
Original
1598 people have browsed it

Based on 9 CSS3 mouse-over album preview effects, it contains nine different album expansion effects codes. The renderings are as follows:

Online preview Source code download

Implemented code.

html code:

 <div class="albums">        <div class="albums-inner">            <div class="albums-tab">                <div class="albums-tab-thumb sim-anim-1">                    <img src="images/studio_0001.jpg" class="all studio" />                    <img src="images/studio_0002.jpg" class="all studio" />                    <img src="images/studio_0003.jpg" class="all studio" />                    <img src="images/studio_0004.jpg" class="all studio" />                    <img src="images/studio_0005.jpg" class="all studio" />                    <img src="images/studio_0006.jpg" class="all studio" />                    <img src="images/studio_0001.jpg" class="all studio" />                </div>                <div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div>            </div>            <div class="albums-tab">                <div class="albums-tab-thumb sim-anim-2">                    <img src="images/studio_0001.jpg" class="all studio" />                    <img src="images/studio_0002.jpg" class="all studio" />                    <img src="images/studio_0003.jpg" class="all studio" />                    <img src="images/studio_0004.jpg" class="all studio" />                    <img src="images/studio_0010.jpg" class="all studio" />                </div>                <div class="albums-tab-text">.sim-anim-2 <span>(5 pictures)</span></div>            </div>            <div class="albums-tab">                <div class="albums-tab-thumb sim-anim-3">                    <img src="images/studio_0001.jpg" class="all studio" />                    <img src="images/studio_0002.jpg" class="all studio" />                    <img src="images/studio_0003.jpg" class="all studio" />                    <img src="images/studio_0004.jpg" class="all studio" />                    <img src="images/studio_0005.jpg" class="all studio" />                    <img src="images/studio_0006.jpg" class="all studio" />                    <img src="images/studio_0007.jpg" class="all studio" />                    <img src="images/studio_0008.jpg" class="all studio" />                    <img src="images/studio_0011.jpg" class="all studio" />                </div>                <div class="albums-tab-text">.sim-anim-3 <span>(9 pictures)</span></div>            </div>            <div class="albums-tab">                <div class="albums-tab-thumb sim-anim-4">                    <img src="images/studio_0001.jpg" class="all studio" />                    <img src="images/studio_0002.jpg" class="all studio" />                    <img src="images/studio_0003.jpg" class="all studio" />                    <img src="images/studio_0004.jpg" class="all studio" />                    <img src="images/studio_0005.jpg" class="all studio" />                    <img src="images/studio_0006.jpg" class="all studio" />                    <img src="images/studio_0007.jpg" class="all studio" />                    <img src="images/studio_0008.jpg" class="all studio" />                    <img src="images/studio_0009.jpg" class="all studio" />                </div>                <div class="albums-tab-text">.sim-anim-4 <span>(9 pictures)</span></div>            </div>            <div class="albums-tab">                <div class="albums-tab-thumb sim-anim-5">                    <img src="images/studio_0001.jpg" class="all studio" />                    <img src="images/studio_0002.jpg" class="all studio" />                    <img src="images/studio_0003.jpg" class="all studio" />                    <img src="images/studio_0004.jpg" class="all studio" />                    <img src="images/studio_0005.jpg" class="all studio" />                </div>                <div class="albums-tab-text">.sim-anim-5 <span>(5 pictures)</span></div>            </div>            <div class="albums-tab">                <div class="albums-tab-thumb sim-anim-6">                    <img src="images/studio_0001.jpg" class="all studio" />                    <img src="images/studio_0009.jpg" class="all studio" />                    <img src="images/studio_0003.jpg" class="all studio" />                    <img src="images/studio_0004.jpg" class="all studio" />                    <img src="images/studio_0005.jpg" class="all studio" />                    <img src="images/studio_0006.jpg" class="all studio" />                    <img src="images/studio_0007.jpg" class="all studio" />                    <img src="images/studio_0008.jpg" class="all studio" />                    <img src="images/studio_0002.jpg" class="all studio" />                </div>                <div class="albums-tab-text">.sim-anim-6 <span>(9 pictures)</span></div>            </div>            <div class="albums-tab">                <div class="albums-tab-thumb sim-anim-7">                    <img src="images/studio_0001.jpg" class="all studio" />                    <img src="images/studio_0002.jpg" class="all studio" />                    <img src="images/studio_0003.jpg" class="all studio" />                    <img src="images/studio_0004.jpg" class="all studio" />                </div>                <div class="albums-tab-text">.sim-anim-7 <span>(4 pictures)</span></div>            </div>            <div class="albums-tab">                <div class="albums-tab-thumb sim-anim-8">                    <img src="images/studio_0001.jpg" class="all studio" />                    <img src="images/studio_0002.jpg" class="all studio" />                    <img src="images/studio_0009.jpg" class="all studio" />                    <img src="images/studio_0004.jpg" class="all studio" />                    <img src="images/studio_0005.jpg" class="all studio" />                    <img src="images/studio_0006.jpg" class="all studio" />                    <img src="images/studio_0007.jpg" class="all studio" />                    <img src="images/studio_0008.jpg" class="all studio" />                    <img src="images/studio_0003.jpg" class="all studio" />                </div>                <div class="albums-tab-text">.sim-anim-8 <span>(9 pictures)</span></div>            </div>            <div class="albums-tab">                <div class="albums-tab-thumb sim-anim-9">                    <img src="images/studio_0001.jpg" class="all studio" />                    <img src="images/studio_0002.jpg" class="all studio" />                    <img src="images/studio_0003.jpg" class="all studio" />                    <img src="images/studio_0004.jpg" class="all studio" />                    <img src="images/studio_0005.jpg" class="all studio" />                    <img src="images/studio_0009.jpg" class="all studio" />                    <img src="images/studio_0007.jpg" class="all studio" />                    <img src="images/studio_0008.jpg" class="all studio" />                    <img src="images/studio_0006.jpg" class="all studio" />                </div>                <div class="albums-tab-text">.sim-anim-9 <span>(9 pictures)</span></div>            </div>        </div>    </div>
Copy after login

via: http://www.w2bc.com/Article/43855

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!