kategorilerin altına bir elementorden bir html ekle
<style>
.lifci-categories {
--lc-dark: #302b27;
--lc-text: #504942;
--lc-cream: #fffaf3;
--lc-border: rgba(70, 55, 42, 0.10);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
width: 100%;
margin: 0 auto;
}
.lifci-cat {
position: relative;
display: block;
height: 355px;
overflow: hidden;
border-radius: 24px;
background: #eee;
text-decoration: none !important;
box-shadow:
0 10px 30px rgba(45, 36, 29, 0.08),
0 2px 8px rgba(45, 36, 29, 0.04);
isolation: isolate;
transition:
transform .45s cubic-bezier(.2,.8,.2,1),
box-shadow .45s ease;
}
.lifci-cat-image {
position: absolute;
inset: 0;
overflow: hidden;
}
.lifci-cat-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.01);
transition:
transform .8s cubic-bezier(.2,.8,.2,1),
filter .5s ease;
}
.lifci-cat-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(0,0,0,0.00) 35%,
rgba(0,0,0,0.06) 70%,
rgba(0,0,0,0.16) 100%
);
pointer-events: none;
}
.lifci-cat-box {
position: absolute;
z-index: 5;
left: 22px;
right: 22px;
bottom: 22px;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 86px;
padding: 15px 16px 15px 20px;
border: 1px solid rgba(255,255,255,.68);
border-radius: 17px;
background: rgba(255, 250, 243, 0.92);
box-shadow:
0 12px 32px rgba(45, 35, 28, .14),
inset 0 1px 0 rgba(255,255,255,.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition:
transform .4s ease,
background .4s ease,
box-shadow .4s ease;
}
/* Sol metin alanı */
.lifci-cat-copy {
min-width: 0;
}
/* Küçük etiket */
.lifci-cat-small {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 4px;
color: #9b7b63;
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.lifci-cat-small::before {
content: "";
width: 18px;
height: 1px;
background: currentColor;
}
/* Ana başlık */
.lifci-cat-title {
margin: 0 !important;
padding: 0 !important;
color: var(--lc-dark) !important;
font-family: inherit;
font-size: clamp(24px, 2vw, 31px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.7px;
}
/* Alt açıklama */
.lifci-cat-desc {
display: block;
margin-top: 5px;
color: #756d67;
font-size: 12px;
font-weight: 400;
line-height: 1.3;
}
.lifci-cat-arrow {
flex: 0 0 48px;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-left: 14px;
border-radius: 50%;
background: var(--lc-dark);
color: #fff;
box-shadow:
0 7px 18px rgba(40, 32, 27, .18);
transition:
transform .4s cubic-bezier(.2,.8,.2,1),
background .3s ease;
}
.lifci-cat-arrow svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.lifci-cat:hover {
transform: translateY(-5px);
box-shadow:
0 20px 45px rgba(45, 36, 29, 0.13),
0 5px 12px rgba(45, 36, 29, 0.05);
}
.lifci-cat:hover img {
transform: scale(1.065);
}
.lifci-cat:hover .lifci-cat-box {
transform: translateY(-3px);
background: rgba(255, 250, 243, 0.97);
box-shadow:
0 17px 38px rgba(45, 35, 28, .17),
inset 0 1px 0 rgba(255,255,255,.9);
}
.lifci-cat:hover .lifci-cat-arrow {
transform: translateX(3px) rotate(-6deg);
background: #9a7259;
}
.lifci-cat::before {
content: "";
position: absolute;
z-index: 3;
width: 320px;
height: 320px;
left: var(--mouse-x, 50%);
top: var(--mouse-y, 50%);
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(255,255,255,.18) 0%,
rgba(255,255,255,.04) 40%,
transparent 70%
);
opacity: 0;
pointer-events: none;
transition: opacity .35s ease;
}
.lifci-cat:hover::before {
opacity: 1;
}
@media (max-width: 1024px) {
.lifci-categories {
gap: 16px;
}
.lifci-cat {
height: 310px;
border-radius: 20px;
}
.lifci-cat-box {
left: 16px;
right: 16px;
bottom: 16px;
}
}
@media (max-width: 767px) {
.lifci-categories {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.lifci-cat {
height: 230px;
border-radius: 16px;
}
.lifci-cat-box {
left: 9px;
right: 9px;
bottom: 9px;
min-height: 68px;
padding: 11px 10px 11px 13px;
border-radius: 12px;
}
.lifci-cat-small {
margin-bottom: 3px;
font-size: 8px;
letter-spacing: .8px;
}
.lifci-cat-small::before {
width: 11px;
}
.lifci-cat-title {
font-size: 18px;
letter-spacing: -.3px;
}
.lifci-cat-desc {
display: none;
}
.lifci-cat-arrow {
flex-basis: 34px;
width: 34px;
height: 34px;
margin-left: 6px;
}
.lifci-cat-arrow svg {
width: 14px;
height: 14px;
}
}
@media (max-width: 380px) {
.lifci-cat {
height: 205px;
}
.lifci-cat-title {
font-size: 16px;
}
}
</style>
<div class="lifci-categories">
<!-- KİŞİSEL -->
<a
href="https://lifci.com/product-category/kisisel/"
class="lifci-cat"
aria-label="Kişisel ürün kategorisini ziyaret et"
>
<div class="lifci-cat-image">
<img
src="https://lifci.com/wp-content/uploads/2026/08/el-orgusu-dus-lifi-300x300.png"
alt="Kişisel ürünler"
loading="lazy"
>
</div>
<div class="lifci-cat-box">
<div class="lifci-cat-copy">
<span class="lifci-cat-small">
Kendinize özel
</span>
<h3 class="lifci-cat-title">
Kişisel
</h3>
<span class="lifci-cat-desc">
El emeği, yumuşak ve renkli seçimler
</span>
</div>
<span class="lifci-cat-arrow" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M5 12h14"></path>
<path d="m13 6 6 6-6 6"></path>
</svg>
</span>
</div>
</a>
<a
href="https://lifci.com/product-category/hediyelik/"
class="lifci-cat"
aria-label="Hediyelik ürün kategorisini ziyaret et"
>
<div class="lifci-cat-image">
<img
src="https://lifci.com/wp-content/uploads/2026/08/Adsiz-tasarim-300x300.png"
alt="Hediyelik ürünler"
loading="lazy"
>
</div>
<div class="lifci-cat-box">
<div class="lifci-cat-copy">
<span class="lifci-cat-small">
Sevdiklerinize özel
</span>
<h3 class="lifci-cat-title">
Hediyelik
</h3>
<span class="lifci-cat-desc">
Küçük ama anlamlı el yapımı hediyeler
</span>
</div>
<span class="lifci-cat-arrow" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M5 12h14"></path>
<path d="m13 6 6 6-6 6"></path>
</svg>
</span>
</div>
</a>
</div>
<script>
document.querySelectorAll('.lifci-cat').forEach(function(card) {
card.addEventListener('mousemove', function(e) {
const rect = card.getBoundingClientRect();
card.style.setProperty(
'--mouse-x',
(e.clientX - rect.left) + 'px'
);
card.style.setProperty(
'--mouse-y',
(e.clientY - rect.top) + 'px'
);
});
});
</script>ve bunu kullan daha yatay ve dar bir tasarım. yolun başındasın başarılar