├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS-Image-Hover-Effects 2 | 3 | Screenshot 2022-08-29 at 19 44 07 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Test 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 |
17 |
18 |
19 |

Image Title

20 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi accusamus molestias quidem iusto. 21 |

22 |
23 |
24 |
25 |
26 |
27 | 28 |
29 |
30 |
31 |

Image Title

32 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi accusamus molestias quidem iusto. 33 |

34 |
35 |
36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 |

Image Title

44 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi accusamus molestias quidem iusto. 45 |

46 |
47 |
48 |
49 |
50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | min-height: 100vh; 10 | background-color: #f2eee3; 11 | } 12 | .container { 13 | position: relative; 14 | width: 1160px; 15 | display: flex; 16 | justify-content: center; 17 | flex-wrap: wrap; 18 | transform-style: preserve-3d; 19 | perspective: 500px; 20 | margin: auto; 21 | } 22 | .container .box { 23 | position: relative; 24 | width: 275px; 25 | height: 275px; 26 | background: #000; 27 | transition: 0.5s; 28 | transform-style: preserve-3d; 29 | overflow: hidden; 30 | margin-right: 15px; 31 | margin-top: 45px; 32 | } 33 | .container:hover .box { 34 | transform: rotateY(25deg); 35 | } 36 | .container .box:hover ~ .box { 37 | transform: rotateY(-25deg); 38 | } 39 | .container .box:hover { 40 | transform: rotateY(0deg) scale(1.25); 41 | z-index: 1; 42 | box-shadow: 0 25px 40px rgba(0,0,0,0.5); 43 | } 44 | .container .box .imgBx { 45 | position: absolute; 46 | top: 0; 47 | left: 0; 48 | width: 100%; 49 | height: 100%; 50 | } 51 | .container .box .imgBx:before { 52 | content: ''; 53 | position: absolute; 54 | top: 0; 55 | left: 0; 56 | width: 100%; 57 | height: 100%; 58 | background: linear-gradient(180deg,#f00,#000); 59 | z-index: 1; 60 | opacity: 0; 61 | transition: 0.5s; 62 | mix-blend-mode: multiply; 63 | } 64 | .container .box:hover .imgBx:before { 65 | opacity: 1; 66 | } 67 | .container .box .imgBx img { 68 | position: absolute; 69 | top: 0; 70 | left: 0; 71 | width: 100%; 72 | height: 100%; 73 | object-fit: cover; 74 | } 75 | .container .box .content { 76 | position: absolute; 77 | top: 0; 78 | left: 0; 79 | width: 100%; 80 | height: 100%; 81 | z-index: 1; 82 | display: flex; 83 | padding: 20px; 84 | align-items: flex-end; 85 | box-sizing: border-box; 86 | } 87 | .container .box .content h2 { 88 | color: #fff; 89 | transition: 0.5s; 90 | text-transform: uppercase; 91 | margin-bottom: 5px; 92 | font-size: 20px; 93 | transform: translateY(200px); 94 | transition-delay: 0.3s; 95 | } 96 | .container .box:hover .content h2 { 97 | transform: translateY(0px); 98 | } 99 | .container .box .content p { 100 | color: #fff; 101 | transition: 0.5s; 102 | font-size: 14px; 103 | transform: translateY(200px); 104 | transition-delay: 0.4s; 105 | } 106 | .container .box:hover .content p { 107 | transform: translateY(0px); 108 | } 109 | --------------------------------------------------------------------------------