Wyświetl <div> lub <span> nad obrazem: hover

Szukam metody, która pozwoli nadiv lubspan element, który ma się pojawić nad obrazem:hover nad tym obrazem. Mogę to zrobić za pomocą.image:hover ~ .overlay, ale to nie jest dokładnie to, czego szukam. Thediv lubspan element musi przyjmować wymiary obrazów, ponieważ będzie wiele rozmiarów.

Przykład

<img width="200" height="200"/> pozwoli ci:hover zmienianiediv lubspan element zdisplay: none dodisplay: block (niekoniecznie musi być blokiem). Element zmieniany z niewidocznego na widoczny musiałby automatycznie wykryć rozmiar obrazu i dopasować rozmiar elementu do tych samych wymiarów (200x200). Jednak mogłem też mieć<img width="300" height="400"/> który potrzebowałby elementu, aby pasował do rozmiaru (300x400).

Szukam również bardzo łatwego sposobu na umieszczenie tych elementów idealnie na obrazach.

Oto mój kodowy długopis aby pokazać, co mam do tej pory.

questionAnswers(1)

yourAnswerToTheQuestion