HTML5 CSS3 Special Topics create album effects with pure CSS

 

Today, I accidentally found that there was another example in my computer. I felt that the results were quite good. I don't remember when I downloaded them, and I haven't been on w3cfuns for a long time. I miss the days of studying at the front desk and share it with you.

:

The results are not very good. The most important thing is that a line of js is not used, which is the highlight.

First look at the html file:

 

Pure CSS3 album Effect

 
Brief description:

 

1. li in ul determines the number of photos.

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

3. the float: left of li enables li to float left. The div of the large image is stored in li. The position is absolute, which is located based on div # gallary. By default, only the first display is displayed.

4. When you move the mouse over li, the transparency of li span img is changed and the display of li div is displayed.

 

The following is the css file:

 

Css does not have any complicated styles, so it is not described. In addition, I introduced a reset style css and reset.css in html. You can also reset the style as you like:

 

 

html, body, div, 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;}

 

Download source code