9 kinds of cool CSS3 pictures to expand preview and display animated special effects_html/css_WEB-ITnose

For details, please click

Preview online and download now

This is a set of 9 CSS3 cool image preview display animation special effects plug-ins. The new features of css allow us to create a variety of cool animation effects. This picture preview shows the animation effect as a good example. The effect starts with pictures stacked on top of each other. When the mouse slides over the picture, the picture will expand in 9 different ways, including fan shape, flat expansion and other very cool effects. .

html:

Let’s take a look at the HTML structure of this image preview showing animated special effects. The entire structure uses a div.albums as a wrapping container. Its width is set to 1100 pixels.
div

class
=
"albums"
>
div
>

There are 9 .albums-tabs in .albums, which are used to create 9 kinds of image expansion effects. There are two elements in it: .albums-tab-thumb and .albums-tab-text, which are used to place pictures and picture titles respectively.
1
2
3
4
5
6
7
8
9
10
11
12
div

class
=
"albums-tab"
>

div

class
=
"albums-tab-thumb sim-anim-1"
>

img

src
=
"_assets/studio_0001.jpg"

class
=
"all studio"
/>

img

src
=
"_assets/studio_0002.jpg"

class
=
"all studio"
/>

img

src
=
"_assets/studio_0003.jpg"

class
=
"all studio"
/>

img

src
=
"_assets/studio_0004.jpg"

class
=
"all studio"
/ >

img

src
=
"_assets/studio_0005.jpg"

class
=
" all studio"
/>

img

src
=
"_assets/studio_0006.jpg"

class
=
"all studio"
/>

img

src
=
"_assets/studio_0001.jpg"

class
=
"all studio"
/>


div
>

div

class
=
"albums-tab-text"
>.sim-anim-1 span
>(7 pictures)
span
>
div
>

div
>

css:

This image preview shows that animation effects have two main style sheets: main.css and sim-prev-anim.css. main.css is used for some common styles, and sim-prev-anim.css contains 9 CSS codes for image preview display animation effects. In order to create animation effects, the .albums-tab-thumb element must be set to an appropriate width. Remember that the final width set is 10 pixels larger than this width because a 5-pixel padding is set for each image.
1
2
3
4
.albums-tab-thumb{

float
:
left
;

width
:
300px
;
}

Next, set the width of all images in .albums-tab-thumb to its width-10px (5px padding ) and set the background color to white.
1
2
3
4
5
6
.albums-tab-thumb img {

height
:
auto
;

width
:
290px
;

background-color
: rgba(
255
,
255
,
255
,
1
);

padding
:
5px
;
}

Next, let’s take a look at how to create the first effect. The class of the first image preview animation special effect is .sim-anim-1. This animation effect requires 7 pictures. The positioning method of .sim-anim-1 is relative positioning, and the positioning method of the pictures inside it is absolute positioning. Set a 0.5s transition for the image. When the mouse slides over the .sim-anim-1 element, the z-index of the image inside it is set to 1, so that when they perform animation, they will be displayed on top of other images.
1
2
3
4
5
6
7
8
9
10
11
12
13
.sim-anim
-1
{

position
:
relative
;
}
.sim-anim
-1

img{

position
:
absolute
;

-webkit-
transition
:
all

0.5
s;

-moz-
transition
:
all

0.5
s;

-o-
transition
:
all

0.5
s;

transition
:
all

0.5
s;
}
.sim-anim
-1:
hover img{

z-index
:
1
;
}

In order to create the first picture display effect, the first picture should be rotated 10 degrees, and the second picture should be rotated -10 degrees, so that every other picture will have the opposite direction. Next, the third image will be rotated 20 degrees, the fourth image will be rotated -20 degrees, and the fifth and sixth images will be rotated 30 degrees and -30 degrees. The size of the last image is scaled to 90% of the original image.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.sim-anim
-1:
hover img:nth-child(
1
){

-ms-
transform
:
rotate
(
10
deg);

-webkit-
transform
:
rotate
(
10
deg);

transform
:
rotate
(
10
deg);
}
.sim-anim
-1:
hover img:nth-child(
2
){

-ms-
transform
:
rotate
(
-10
deg);

-webkit-
transform
:
rotate
(
-10
deg);

transform
:
rotate
(
-10
deg);
}
.sim-anim
-1:
hover img:nth-child(
3
){

-ms-
transform
:
rotate
(
20
deg);

-webkit-
transform
:
rotate
(
20
deg);

transform
:
rotate
(
20
deg);}
.sim-anim
-1:
hover img:nth-child(
4
){

-ms-
transform
:
rotate
(
-20
deg);

-webkit-
transform
:
rotate
(
-20
deg);

transform
:
rotate
(
-20
deg);
}
.sim-anim
-1:
hover img:nth- child(
5
){

-ms-
transform
:
rotate
(
30
deg);

-webkit-
transform
:
rotate
(
30
deg);

transform
:
rotate
(
30
deg);
}
.sim-anim
-1:
hover img:nth-child(
6
){

-ms-
transform
:
rotate
(
-30
deg);

-webkit-
transform
:
rotate
(
-30
deg);

transform
:
rotate
(
-30
deg);
}
.sim-anim
-1:
hover img:nth-child(
7
){

-ms-
transform
:
scale
(
0.9
,
0.9
);

-webkit-
transform
:
scale
(
0.9
,
0.9
);

transform
:
scale
(
0.9
,
0.9
);
}

How to use this IE image display effect in your own project?

If you want to use one of these 9 image preview display effects for your project, you need to import the sim-prev-anim.css file, and then set the appropriate Name, if the name is different from the name in sim-prev-anim.css, you need to modify the css file, then add an appropriate number of images, and select a class name of the animation effect you need to add to the albums-tab-thumb element .
Note: The number of pictures for each effect is fixed. If the number is incorrect, the displayed effect will be unsightly.
Reprinted from: http://www.htmleaf.com/css3/css3donghua/201503071476.html

For more html5 content, please click