CSS konusunda yardım

10-01-2023, 10:30:00

Merhabalar arkadaşlar,

HTML bir site yapıyorum. Gridin içerisindeki görsellerin biraz soluk olmasını ve üzerine gelindiğinde asıl rengini almasını istiyorum. Bu nasıl mümkün olur acaba ?

10-01-2023, 10:32:31

#2

shentaweb

Wordpress

İmg
{
opacity:80%;
transiition: all .5s;
}
img:hover
{
opacity:100%;
}

10-01-2023, 10:35:06

#3

UbCreative

Web Tasarım ve Yazılım

Css de filter özelliği ile yapabilirsiniz
https://www.w3schools.com/cssref/css3_pr_filter.php

10-01-2023, 10:36:19

#4

velmut

shentaweb adlı üyeden alıntı: mesajı görüntüle

İmg
{
opacity:80%;
transiition: all .5s;
}
img:hover
{
opacity:100%;
}

bu tam sağlıklı olmayabilir bunun yerine
{
filter: grayscale(100%);
transiition: all .5s;
}
img:hover
{
filter: grayscale(0%);
}

bu daha sağlıklı olur çünkü arkasında renk olabilir başka bişey olabilir.

10-01-2023, 10:40:03

#5

canbudak99

velmut adlı üyeden alıntı: mesajı görüntüle

bu tam sağlıklı olmayabilir bunun yerine
{
filter: grayscale(100%);
transiition: all .5s;
}
img:hover
{
filter: grayscale(0%);
}

bu daha sağlıklı olur çünkü arkasında renk olabilir başka bişey olabilir.

Hocam görseller soluklaştı ama üzerine gelince eski rengini almıyor böyle

10-01-2023, 10:41:13

#6

velmut

canbudak99 adlı üyeden alıntı: mesajı görüntüle

Hocam görseller soluklaştı ama üzerine gelince eski rengini almıyor böyle

filter: grayscale(0%); hover vermelisiniz

10-01-2023, 10:44:50

#7

canbudak99

velmut adlı üyeden alıntı: mesajı görüntüle

filter: grayscale(0%); hover vermelisiniz

.container {
filter: grayscale(100%);
transition: all .5s;
}
img:hover{

filter: grayscale(0%);
}
burada bir yanlışlık var mıdır hocam

10-01-2023, 10:47:38

#8

velmut

canbudak99 adlı üyeden alıntı: mesajı görüntüle

.container {
filter: grayscale(100%);
transition: all .5s;
}
img:hover{

filter: grayscale(0%);
}
burada bir yanlışlık var mıdır hocam

img {
filter: grayscale(100%);
transition: all .5s;
}
img:hover{

filter: grayscale(0%);
}

class vererek yapmanız daha mantıklı

.gray-c {
filter: grayscale(100%);
transition: all .5s;
}
.gray-c:hover{

filter: grayscale(0%);
}

10-01-2023, 10:53:05

#9

canbudak99

velmut adlı üyeden alıntı: mesajı görüntüle

img {
filter: grayscale(100%);
transition: all .5s;
}
img:hover{

filter: grayscale(0%);
}

class vererek yapmanız daha mantıklı

.gray-c {
filter: grayscale(100%);
transition: all .5s;
}
.gray-c:hover{

filter: grayscale(0%);
}

Bootsrap dan yaptım siteyi de classa da denedim yine etki etmedi hocam. Görseller soluklaşıyor ama olmayan tarafı sanırım hover kısmı