├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS-Animated-Frame-Picture 2 | 3 | 4 | 5 | https://user-images.githubusercontent.com/42389395/173342403-0784944a-d950-4a6e-bb10-e39e7292e159.mov 6 | 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Test 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |
16 |
17 |
18 |

#Forest

19 |

This is a description for your photo.

20 |
15:30 13/06/2022
21 |
22 |
23 |
24 | 25 |
26 |
27 |
28 |
29 |

#Cars

30 |

This is a description for your photo.

31 |
15:30 13/06/2022
32 |
33 |
34 |
35 | 36 |
37 |
38 |
39 |
40 |

#Landscape

41 |

This is a description for your photo.

42 |
15:30 13/06/2022
43 |
44 |
45 |
46 | 47 |
48 |
49 |
50 |
51 |

#Painting

52 |

This is a description for your photo.

53 |
15:30 13/06/2022
54 |
55 |
56 |
57 | 58 |
59 |
60 |
61 |
62 |

#Sci-Fi

63 |

This is a description for your photo.

64 |
15:30 13/06/2022
65 |
66 |
67 |
68 | 69 |
70 |
71 |
72 |
73 |

#Minions

74 |

This is a description for your photo.

75 |
15:30 13/06/2022
76 |
77 |
78 |
79 | 80 |
81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f2eee3; 3 | } 4 | 5 | .container { 6 | width : 960px; 7 | margin : 0 auto; 8 | } 9 | 10 | .container:after{ 11 | clear : both; 12 | display : table; 13 | content : ''; 14 | } 15 | 16 | .bg-items { 17 | padding: 20px; 18 | width : 240px; 19 | height : 160px; 20 | margin : 20px; 21 | background-color: white; 22 | float : left; 23 | cursor : pointer; 24 | box-shadow : 3px 3px 5px 0px rgba(0,0,0,0.5); 25 | } 26 | 27 | .items { 28 | width : 240px; 29 | height : 160px; 30 | position: relative; 31 | overflow: hidden; 32 | background-color: #102B46; 33 | 34 | } 35 | 36 | .details { 37 | background-color : rgba(0,0,0,0.5); 38 | width : 220px; 39 | height : 140px; 40 | padding : 10px; 41 | top : 0; 42 | left: 0; 43 | font-family : georgia; 44 | color : #fff; 45 | opacity : 0; 46 | transition : opacity .8s; 47 | } 48 | 49 | .details h3 { 50 | margin-bottom : 20px; 51 | } 52 | 53 | .details h6 { 54 | text-align : right; 55 | margin-top : 30px; 56 | } 57 | 58 | .details p { 59 | font-size : 14px; 60 | font-style: italic; 61 | text-align: center; 62 | line-height : 20px; 63 | } 64 | 65 | .items:hover .details { 66 | opacity : 1; 67 | transition : opacity .2s .3s; 68 | } 69 | 70 | .items div { 71 | position : absolute; 72 | } 73 | 74 | 75 | /* frame */ 76 | 77 | .frame { 78 | left : 0; 79 | top : 0; 80 | width : inherit; 81 | height: inherit; 82 | background-color : #f2eee3; 83 | transition : all .3s; 84 | transform: scale(0,0); 85 | } 86 | 87 | .items:hover .frame { 88 | left : 0; 89 | top : 0; 90 | transform : scale(1,1); 91 | transition : all .3s; 92 | } 93 | 94 | 95 | 96 | 97 | 98 | --------------------------------------------------------------------------------