├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # CSS-Image-Hover-London 2 | 3 | 4 | 5 | 6 | https://user-images.githubusercontent.com/42389395/174076020-e904831c-0607-4933-a0f7-5f041e64ab6d.mov 7 | 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Test 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |

London

16 |

Welcome to London! Discover the best of London with Visit London, the official guide to England’s exciting capital.

Read More 17 |
18 |
19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800); 2 | figure.container { 3 | font-family: 'Raleway', Arial, sans-serif; 4 | color: #fff; 5 | position: relative; 6 | overflow: hidden; 7 | margin: 10px; 8 | min-width: 220px; 9 | max-width: 310px; 10 | max-height: 220px; 11 | width: 100%; 12 | color: #ffffff; 13 | text-align: left; 14 | background-color: #07090c; 15 | font-size: 16px; 16 | -webkit-perspective: 50em; 17 | perspective: 50em; 18 | } 19 | figure.container * { 20 | -webkit-box-sizing: border-box; 21 | box-sizing: border-box; 22 | -webkit-transition: all 0.6s ease; 23 | transition: all 0.6s ease; 24 | } 25 | figure.container img { 26 | opacity: 1; 27 | width: 100%; 28 | -webkit-transform-origin: 50% 100%; 29 | -ms-transform-origin: 50% 100%; 30 | transform-origin: 50% 100%; 31 | } 32 | figure.container figcaption { 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | -webkit-transform: rotateX(-90deg); 38 | transform: rotateX(-90deg); 39 | -webkit-transform-origin: 50% -50%; 40 | -ms-transform-origin: 50% -50%; 41 | transform-origin: 50% -50%; 42 | z-index: 1; 43 | opacity: 0; 44 | padding: 20px 30px; 45 | } 46 | figure.container h3, 47 | figure.container p { 48 | line-height: 1.5em; 49 | } 50 | figure.container h3 { 51 | margin: 0; 52 | font-weight: 800; 53 | text-transform: uppercase; 54 | } 55 | figure.container p { 56 | font-size: 0.8em; 57 | font-weight: 500; 58 | margin: 0 0 15px; 59 | } 60 | figure.container .more { 61 | border: 2px solid #ffffff; 62 | padding: 0.5em 1em; 63 | font-size: 0.8em; 64 | text-decoration: none; 65 | color: #ffffff; 66 | display: inline-block; 67 | } 68 | figure.container .more:hover { 69 | background-color: #ffffff; 70 | color: #000000; 71 | } 72 | figure.container:hover img, 73 | figure.container.hover img { 74 | -webkit-transform: rotateX(90deg); 75 | transform: rotateX(90deg); 76 | opacity: 0; 77 | } 78 | figure.container:hover figcaption, 79 | figure.container.hover figcaption { 80 | -webkit-transform: rotateX(0deg); 81 | transform: rotateX(0deg); 82 | opacity: 1; 83 | -webkit-transition-delay: 0.2s; 84 | transition-delay: 0.2s; 85 | } 86 | 87 | --------------------------------------------------------------------------------