WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
carte avec animation
1177
ashimadison8
Open In Editor
Video
Publish Your Code
0
Recommended
18 September 2025
CSS Window Animation HTML Snippet
23 September 2025
CSS Falling Loading Animation Snippet
13 June 2025
Effet de survol des cartes
HTML
Copy
Brazil
Latest Deals from Heathrow
OUT
£849
RTN
£659
Belize
Latest Deals from Heathrow
OUT
£999
RTN
£745
Egypt
Latest Deals from Heathrow
OUT
£399
RTN
£257
CSS
Copy
body { margin: 0; background-color: #2e2e31; display: flex; align-items: center; height: 100vh; width: 100vw; } .container { height: 100vh; width: 100vw; max-height: 600px; max-width: 1200px; min-height: 600px; min-width: 1100px; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; } .panel { height: 270px; width: 190px; position: relative; &:hover { .card { filter: blur(1.5px); } .card1 { background-size: 215% 135%; } .card2 { background-size: 115% 115%; } .card3 { background-size: 155% 115%; } .title { color: rgba(255, 255, 255, 0.2); } .border { border: 1px solid rgba(255, 255, 255, 1); } .slide { bottom: 0px; } .ring:before, .ring:after { transform: translateX(-50%) translateY(-50%) rotate(310deg); } } } .ring, .card, .border, .slide, .line { display: flex; justify-content: center; align-items: center; } .ring { color: #fffbf1; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 170px; } .card { background: #f0ead6; position: relative; transition: all 1s; height: 270px; width: 190px; border: 1px solid rgba(255, 255, 255, 1); } .card1 { background-image: url("https://assets.codepen.io/489403/brazil.jpg"); background-repeat: no-repeat; background-size: 200% 120%; } .card2 { background-image: url("https://assets.codepen.io/489403/belize.jpg"); background-repeat: no-repeat; background-size: 100% 100%; } .card3 { background-image: url("https://assets.codepen.io/489403/egypt.jpg"); background-repeat: no-repeat; background-size: 140% 100%; } .ring:before, .ring:after { content: ""; padding: 0.7em 0.4em; position: absolute; left: 50%; width: 115%; top: 50%; display: block; border: 5px solid #50c9c3; border-radius: 50%; transition: transform 1s; transform: translateX(-50%) translateY(-50%) rotate(50deg); } .ring:before { border-color: rgb(235, 235, 235) rgb(235, 235, 235) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); z-index: -1; } .ring:after { border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(235, 235, 235) rgb(235, 235, 235); } p { text-align: center; position: absolute; font-family: "Playfair Display"; } .title { font-size: 36px; font-weight: 700; transition: all 1s; top: 0; } .para { bottom: 0; font-size: 16px; font-family: "Raleway"; padding: 20px; margin: 0; text-align: center; } .border { position: absolute; border: 1px solid rgba(255, 255, 255, 0.5); height: 260px; width: 180px; transition: border 1s; overflow: hidden; } .slide { height: 260px; width: 180px; position: absolute; border: 1px solid black; bottom: -270px; background: rgba(0, 0, 0, 0.5); transition: bottom 1s; flex-direction: column; } .fa-plane { font-size: 16px; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */