Jak uzyskać taki efekt w CSS?

Question

Cześć, znalazłem takie coś -> https://codepen.io/heyitsolivia/full/CaJFA

Chciałbym uzyskać podobny efekt jak tutaj po najechaniu na obrazek. Bez animacji guziczka, bardziej chodzi mi o coś prostego. Typu prosta animacja zmniejszająca przezroczystość i potem na miejscu obrazka div z tym obrazkiem w tle. Nie mam pojęcia jak takie coś zacząć. Nie znalazłem też niczego podobnego.

 

Chcę też umieścić tylko dwie takie kolumny w wierszu i zastanawiam się jak zrobić auto skalowanie obrazka. Bo rozdzielczości bywają różne, załóżmy najtrudniejszy wariant i rozdzielczość 5k np. w imacu 27. To jak wtedy to ugryźć? Mogę wymagać od użytkownika zdjęcia o rozmiarze przykładowo minimum 3000 na xxxx, ale czy to ma sens?

Answer 1

obrazek daj jako tło a na niego narzuć diva który jest ukryty a po najechaniu na niego ( nazwa:hover ) wyświetla tego diva