CSS Obrazek popup

[Drakhtul]

Witam. Mam taki problem. Chciałbym żeby po najechaniu na obrazek wyświetlała się ramka z informacjami. Tak jak w kodzie, który umieściłem ale tutaj jest tylko do tekstu. Mógłby go ktoś przerobic żeby działał na obrazkach?

HTML :

Kod:

<a class="tooltip">Classic<span class="classic">TEXT</span></a>

CSS :

Kod:

a.tooltip {
   color: #000000; outline: none;
   position: relative;
}
a.tooltip span {
   margin-left: -999em;
   position: absolute;
}
a.tooltip:hover span {
   font-family: Calibri, Tahoma, Geneva, sans-serif;
   left: 1em;
   top: 2em;
   margin-left: 0;
   width: 250px;
   background:#000;
   color:#cecece;
   padding: 5px 5px 5px 10px;
}
a.tooltip:hover img {
   border: 0;
   margin: -10px 0 0 -55px;
   float: left;
   position: absolute;
}
a.tooltip:hover em {
   font-family: Candara, Tahoma, Geneva, sans-serif;
   font-size: 1.2em;
   font-weight: bold;
   display: block;
   padding: 0.2em 0 0.6em 0;
}
a.classic { padding: 0.8em 1em;}
a.custom { padding: 0.5em 0.8em 0.8em 2em;}

[Kartofelek]

Twój kod ma błędy.
Możesz tak to zrobić:

Kod:

a.tooltip {
     position:relative;
}
a.tooltip span {
     display:none;
}
a.tooltip:hover span {
   display:block;
   background:white;    
   padding:5px 15px;
   font:12px Arial, sans-serif;
   color:#333;
   position:absolute;
   right:-100px;
   top:30px;
}

<a href="">
     <img src="" />
     <span>Lorem ipsum sit dolor</span>
</a>

Możesz też wykorzystać :before i http://css-tricks.com/css-content/

[Drakhtul]

Kod, który wysłałeś nie działa. Czekam na inne odpowiedzi

[andrzejhi]

Przepraszam może jestem głupi albo nie potrafię czytać ale coraz mniej rozumiem pytania które zamieszczacie. Rozumiem że na stronie jest wyświetlony obrazek a jak na niego najedziemy kursorem to obok się wyświetla ukryty tekst? Czy dobrze zrozumiałem. Ale jeśli tak to kompletnie nie rozumiem zamieszczonego kodu. przecież on nic nie ukrywa po najechaniu tekstu.

---

A poza tym to co zamieścił Kartofelek jest rozwiązaniem twojego problemu. Trzeba tylko wstawić tekst oraz ścieżkę do obrazka.

[Drakhtul]

Nie?

A to co to jest? Czekam na pomoc

[andrzejhi]

No dobra ale robienie tego marginesem gdy jest styl block: none jest dziwnym podejsciem.
Ale nadal jestem zdania że kod Kartofelka powinien dzialac.

[Kartofelek]

Działać działa. Żadna przecież filozofia. Masz ukryty span (dispaly:none), który po najechaniu linku pokazujes (display:block). Reszta to dodatki.

[Drakhtul]

Kod Kartofelka powinien dzialac? U mnie wyglada to tak...
Marginesem czy blockiem... ja sie na tym nie znam... chcialbym o ile to mozliwe zeby ktos mi podal dzialajacy kod

[Kartofelek]

Kod podałem prawidłowy, to że go źle używasz, to już inna spraw

[Drakhtul]

Faktycznie cos tam smiga... nie wiem czy zapomniales czy zrobiles to specjalnie ale nie dopisales <a class="tooltip" href="#"> i przez to cale zamieszanie. Kod jest w gruncie rzeczy poprawny. Wyswietla ramke z tekstem tak jak prosilem. Dzieki. Tylko ze ja chcialbym zeby ta ramka z tekstem wyswietlala sie bezposrednio pod kursorem a nie pod obrazkiem. Da rade cos takiego zrobic czy nie bardzo? Moze jakis javascript? Pomoze ktos?