v2.5.2
Giriş yap

CSS GrayScale

aykuttorbay7
497 defa görüntülendi
1

Arkadaslar herkese merhaba

bir sorum olacak GrayScale ile ilgill.

bir divim var background ile resim verdim, hover oldugunda da filter: grayscale(100%) verdim
buraya kadar sorun yok. ama divin icerisinde button var. hover oldugunda button'a da grayscale uygulaniyor.
istedigim uygulanmamasi sadece background'a uygulanmasi.
nasil yaparim?

tesekkur ederim, iyi calismalar

css
Cevap yaz
Cevaplar (1)
howlberg
1067 gün önce
<style>
.slide img {
    width: 100%;
    height: 500px;
    filter: grayscale(.9);
}
.slide {
    position: relative;
}
.bg-text {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 99;
}
</style>

<div class="slide">
    <div class="bg-text">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero aut saepe enim hic ab officiis perspiciatis sequi nam optio inventore. Modi esse voluptas ipsa nulla dolorem nisi fugit nostrum repellendus.</p>
    </div>
    <img src="https://images.ctfassets.net/hrltx12pl8hq/5KiKmVEsCQPMNrbOE6w0Ot/341c573752bf35cb969e21fcd279d3f9/hero-img_copy.jpg?fit=fill&w=800&h=300" alt="">
</div>

Div'e verdiğin filter divin içinde ki tüm elemanları da kapsar. Onun yerine bir div'e img ve text ver, position ile divin top:0'ına al ve img'e filter ver. Bu kodu kullanırsan istediğini uygulayabilirsin.

1
#005005