|
|
|
|
|
.image-container { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
border-radius: 0.5rem; |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
|
|
|
.image-container img { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.image-container:hover img { |
|
|
transform: scale(1.02); |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes gradient { |
|
|
0% { |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
50% { |
|
|
background-position: 100% 50%; |
|
|
} |
|
|
100% { |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); |
|
|
background-size: 400% 400%; |
|
|
animation: gradient 15s ease infinite; |
|
|
} |