style chages
This commit is contained in:
@@ -159,17 +159,21 @@
|
|||||||
height: 140px;
|
height: 140px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
background: white;
|
background: white;
|
||||||
transition: transform 0.3s ease;
|
padding: 10px;
|
||||||
|
transition: transform 0.3s ease, filter 0.3s ease;
|
||||||
|
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover img {
|
&:hover img {
|
||||||
transform: scale(1.08);
|
transform: scale(1.08);
|
||||||
|
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12)) brightness(1.05);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -67,6 +67,7 @@
|
|||||||
padding-top: 75%; // 4:3 aspect ratio
|
padding-top: 75%; // 4:3 aspect ratio
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -76,6 +77,14 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
background: white;
|
background: white;
|
||||||
|
padding: 12px;
|
||||||
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
|
||||||
|
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.06));
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover img {
|
||||||
|
transform: scale(1.06) translateY(-2px);
|
||||||
|
filter: drop-shadow(0 12px 24px rgba(0,0,0,0.15)) brightness(1.03);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -254,7 +254,15 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
background: white;
|
background: white;
|
||||||
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
padding: 15px;
|
||||||
|
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease;
|
||||||
|
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .category-media img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
filter: drop-shadow(0 16px 32px rgba(0,0,0,0.18)) saturate(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-fallback {
|
.category-fallback {
|
||||||
|
|||||||
@@ -140,6 +140,7 @@
|
|||||||
padding-top: 75%;
|
padding-top: 75%;
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -149,6 +150,14 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
background: white;
|
background: white;
|
||||||
|
padding: 12px;
|
||||||
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
|
||||||
|
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.06));
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover img {
|
||||||
|
transform: scale(1.06) translateY(-2px);
|
||||||
|
filter: drop-shadow(0 12px 24px rgba(0,0,0,0.15)) brightness(1.03);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user