HTML5 CSS3 create album effect with source code download

Time:2022-4-11

Today, I accidentally found another example in the computer. I feel the effect is good. I don’t remember when I downloaded it and haven’t been on w3cfuns for a long time. I miss the days of learning from the front desk and share it with you.

design sketch:
 

The effect is still very good. The most important thing is that one line of JS is not used, which is the highlight.

First look at the HTML file:

Copy code

The code is as follows:

<body>
<div>
<h1>Pure CSS3 album effect</h1>
<ul>
<li>
<span><img src=”images/pic1.jpg”/></span>
<div style=”display: block;”>
<img src=”images/pic1.jpg”/>
</div>
</li>
<li>
<span><img src=”images/pic2.jpg”/></span>
<div>
<img src=”images/pic2.jpg”/>
</div>
</li>
<li>
<span><img src=”images/pic3.jpg”/></span>
<div>
<img src=”images/pic3.jpg”/>
</div>
</li>
<li>
<span><img src=”images/pic4.jpg”/></span>
<div>
<img src=”images/pic4.jpg”/>
</div>
</li>
<li>
<span><img src=”images/pic5.jpg”/></span>
<div>
<img src=”images/pic5.jpg”/>
</div>
</li>

</ul>
<div></div>
</div>

</body>

Briefly describe:

1. Li in UL determines the number of photos

2. UL use the style float: right, width: 140px; Make it displayed in the right area of the album

3. Float: left of Li, so that Li can float left; The div of the large picture is stored in Li, and the position is absolute. It will be located according to the div#galaxy. By default, only the first one is displayed

4. When you move the mouse over Li, change the transparency of Li span img and the display of Li div to display the large picture

Next is the CSS file:

Copy code

The code is as follows:

<style type=”text/css”>
body
{
Font family: “Microsoft YaHei”;
}
#gallery
{
width: 700px;
position: relative;
margin: 20px auto 0;
background-color: #000;
min-height: 400px;
padding: 20px;
}
/*Title*/
#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 div
{
display: block;
}
#gallery ul li div img
{
width: 460px;
height: 288px;
}
#gallery ul li div
{
display: none;
position: absolute;
top: 100px;
left: 30px;
border: 5px solid #fff;
}
.clearfix
{
clear: both;
}

</style>

There are no complex styles in CSS, so I won’t describe them. In addition, in HTML, I introduced a CSS to reset the style, reset CSS, you can also use the reset style you are used to:

Copy code

The code is as follows:

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;
}

Click to download the source code