Spaces:
Paused
Paused
File size: 1,717 Bytes
ff36e71 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!DOCTYPE html>
<html>
<head>
<style>
body { background: #000; margin: 0; padding: 50px; color: white; }
.siri-hero-gallery {
display: flex;
overflow-x: auto;
gap: 16px;
width: 600px;
}
.siri-image-aura-container {
position: relative;
padding: 24px 40px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 40px;
flex: 0 0 auto;
}
.siri-aura-bg {
position: absolute;
inset: -20px;
width: calc(100% + 40px);
height: calc(100% + 40px);
object-fit: cover;
filter: blur(25px) brightness(1.2);
opacity: 0.9;
z-index: 1;
}
.siri-hero-fog {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
border-radius: 40px;
box-shadow: inset 0 0 60px 30px rgba(0,0,0,1);
}
.siri-hero-image-top {
position: relative;
z-index: 3;
width: auto;
max-width: 80vw;
height: 450px;
border-radius: 12px;
object-fit: cover;
box-shadow: 0 0 30px 10px rgba(0,0,0,0.4);
-webkit-mask-image: radial-gradient(ellipse at center, black 90%, transparent 100%);
mask-image: radial-gradient(ellipse at center, black 90%, transparent 100%);
}
</style>
</head>
<body>
<div class="siri-hero-gallery">
<div class="siri-image-aura-container">
<img class="siri-aura-bg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Chaophrayansawan03.jpg/1280px-Chaophrayansawan03.jpg">
<div class="siri-hero-fog"></div>
<img class="siri-hero-image-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Chaophrayansawan03.jpg/1280px-Chaophrayansawan03.jpg">
</div>
</div>
</body>
</html>
|