[PrawyKuba]

#webdev #webdevhelp


Mam taki kod. Chcę dodać hover do obrazka, że po najechaniu na niego kursorem wypełnia się kolorem (obrazek, nie cała kolumna col-md-4 + obrazek). Zależy mi na takiej strukturze tj. col-md-4 => img, bo mogę sobie to łatwo wyrównać text-centerem, chyba, że jestem głupi i można to wyśrodkować inaczej ( ͡° ͜ʖ ͡°).

Proszę o pomoc Mireczky.

[Rst00]

@PrawyKuba: no i w czym masz problem? .img-1 img:hover

[PrawyKuba]

@Rst00: Próbowałem, działa z borderem, blurem, ale z colorem, backgroundcolorem, backgroundem nie.

[tomeczek11]

@PrawyKuba: masz jakiegoś cssa?

[PrawyKuba]

@tomeczek11: Mam. Ten od bootstrapa i customowy. Przy czym w tym customowym jak próbuję zwykłym .img-1 img:hover { background-color: } to nie działa.

[epi]

@PrawyKuba: background na obrazku działa, ale jest zasłonięty przez ten obrazek właśnie ;)
podmieniaj na hoverze też src na jakiegoś jednopixelowego przezroczystego gifa lub pnga, najlepiej zakodowanego w base64

ewentualnie ostyluj sobie :after od obrazka odpowiednio, żeby przykrywał obrazek kolorem

[Rst00]

@epi: przecież :after na obrazku nie zadziała.

[epi]

@Rst00: to może być dodatkowy div ;)

[Rst00]

@epi: no jak da obrazek w jeszcze dodatkowy kontener to ok ;)

[PrawyKuba]

@epi: Nie wiem czy dobrze rozumiem ;). Powinno to wyglądać w ten sposób? http://pastebin.com/yz549KsL

[epi]

@PrawyKuba: coś w tym stylu raczej: http://stackoverflow.com/questions/2182716/is-it-possible-to-set-the-equivalent-of-a-src-attribute-of-an-img-tag-in-css

aczkolwiek podejście z czymś, co przykryje obrazek kolorem będzie działać w wiekszej liczbie przeglądarek

[epi]

@PrawyKuba: http://jsfiddle.net/b4u7skh0/
:)

[PrawyKuba]

@epi: Bardzo Ci dziękuję za pomoc, teraz już wszystko rozumiem. :)