├── img ├── img1.jpg ├── img2.jpg └── img3.jpg ├── index.html └── style.css /img/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sefyudem/CSS-Image-Hover-Effect/25ba132561f11bda1d1bd3c0e1ae0c63b7e0e7eb/img/img1.jpg -------------------------------------------------------------------------------- /img/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sefyudem/CSS-Image-Hover-Effect/25ba132561f11bda1d1bd3c0e1ae0c63b7e0e7eb/img/img2.jpg -------------------------------------------------------------------------------- /img/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sefyudem/CSS-Image-Hover-Effect/25ba132561f11bda1d1bd3c0e1ae0c63b7e0e7eb/img/img3.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | Image Hover Effect 10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | width: 100vw; 9 | background-color: #efefef; 10 | } 11 | 12 | .container{ 13 | min-height: 100vh; 14 | overflow: hidden; 15 | width: 100%; 16 | padding: 2rem; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | } 21 | 22 | .image{ 23 | overflow: hidden; 24 | height: 300px; 25 | width: 350px; 26 | position: relative; 27 | cursor: pointer; 28 | margin: 0 15px; 29 | box-shadow: 0 0 25px 1px rgba(0, 0, 0, .3); 30 | transition: .5s; 31 | background-color: #555; 32 | } 33 | 34 | .image:after{ 35 | content: ''; 36 | position: absolute; 37 | z-index: 1; 38 | top: 50%; 39 | left: 50%; 40 | width: 500px; 41 | height: 500px; 42 | transform: translate(-140%, -50%); 43 | background-color: rgba(54, 216, 116, 0.8); 44 | border-radius: 50%; 45 | transition: .8s; 46 | } 47 | 48 | .image:hover:after{ 49 | transform: translate(-50%, -50%); 50 | } 51 | 52 | .image:hover img{ 53 | transform: translate(-50%, -50%) scale(1.3) rotate(20deg); 54 | } 55 | 56 | img{ 57 | position: absolute; 58 | height: 110%; 59 | top: 50%; 60 | left: 50%; 61 | transform: translate(-50%, -50%); 62 | transition: .8s; 63 | } 64 | 65 | i{ 66 | position: absolute; 67 | z-index: 2; 68 | top: 50%; 69 | left: 50%; 70 | transform: translate(-2000px, -50%); 71 | color: #fff; 72 | transition: .8s; 73 | transition-timing-function: ease-in; 74 | } 75 | 76 | .image:hover i{ 77 | transform: translate(-50%, -50%); 78 | transition-timing-function: ease; 79 | } --------------------------------------------------------------------------------