Przyciemnianie obrazka w CSS

Question

Witam!

Wie ktoś jak przyciemnić obrazek po najechaniu myszki w CSS oraz jak się najedzie na obrazek wewnątrz zdjęcia wyświetli się napis zobacz? Da ktoś wskazówkę?

 

Answer 1

.foto:hover {
    filter: brightness(50%);
}

.foto:hover .napis {
    opacity: 1.0;
}

Comments

nie działa

---

http://jsfiddle.net/pth17w0h/

Answer 2

Napis można zrobić  ten sposób: http://jsfiddle.net/EgLKV/3/

Dodaj do tego jeszcze coś takiego: 
#text{
display:none;
}
#image:hover  + #text{
display:block;
} 

 

Comments

A jakiś efekt pojawiania się, czy coś - bo tak to natychmiastowo będzie się pojawiać.

Answer 3

:before, :after,

jeżeli zdjęcie masz w linku, tzn:

<a href="">
    <img src="" alt="">
</a>

To dla a nadaj klase relatywną, :before, :after powinny mieć pozycje absolutną.

Do tego opacity + transition i mamy efekt.

:before może być tłem przyciemniającym a :after napisem.

Comments

To jest klika zdjęć :P http://codepen.io/albercig/pen/EyRRjv?editors=1100

---

możesz opatulić każde zdjęcie w link albo diva i zastosować :before, :after.

Z tego w ogóle zrobił bym liste.

---

to ma byc cos takiego

---

Dałem Ci wskazówki, do dzieła.

---

a jak dać napis po hoverze?

---

:after/:before - content: "NAPIS";

---

a jak dodać text pod zdjęciem nie po hoverze, żeby był na środku?