Css najedź na zdjęcie - załaduj div

Chciałbym zrobić efekt CSS na zawisaniu obrazu.Css najedź na zdjęcie - załaduj div

Po najechaniu na zdjęcie chcę wyświetlić element div zawierający treść, na przykład tekst.

Więc chciałbym coś zrobić z tym kodem:

<div id="image"><img src="image.png"/></div> 

<div id="hover">Test message</div>

Próbowałem ukryć „najechaniu” na wyświetlaczu div css i przy aktywowaniu Próbowałem ustawić wyświetlanie do blokowania, ale jego nie działa ... :(

EDIT:.! Chcę tekst na obrazie Kiedy najechaniu obraz powinien dostać jakąś krycie ale tekst nie powinien odbierać że krycie

Czy istnieje jakiś sposób, aby zrobić to?

Źródło

2013-03-11 Taboo Loco

możemy zobaczyć JavaScript? również ustawienie http://jsfiddle.net/ pomoże ... – Th0rndike

Dusza powinna być bez JavaScriptu? – Tbi45

Tak, powinno być bez Js. –

http://jsfiddle.net/ZSZQK/

#hover { 
    display: none; 
} 

#image:hover + #hover { 
    display: block; 
}

Wystarczy keep it simple, nie ma potrzeby, aby zmienić znaczników.

Aktualizacja

Jeśli chcesz zmienić krycie obrazu przy aktywowaniu myszy, a następnie http://jsfiddle.net/ZSZQK/4/

#hover { 
    display: none; 
    position: relative; 
    top: -25px; 
} 

#image:hover { 
    opacity: .7; 
} 

#image:hover + #hover { 
    display: block; 
}

Aktualizacja 2

Od dodania kilku dodatkowych wymagań do początkowego pytania, teraz wymaga to zmiany oryginalnego znacznika html.

jestem zakładając używasz html5, a jeśli tak, to trzeba zastosować znaczniki przeznaczone dla kontekście swojej treści:

<figure> 
    <img src="http://placekitten.com/200/100" /> 
    <figcaption>Test message</figcaption> 
</figure>

i css

figure { 
    position: relative; 
    display: inline-block; 
} 

figcaption { 
    display: none; 
    position: absolute; 
    left: 0; 
    bottom: 5px; 
    right: 0; 
    background-color: rgba(0,0,0,.15); 
} 

figure:hover img { 
    opacity: .7; 
} 

figure:hover figcaption { 
    display: block; 
}

jsFiddle

Źródło

2013-03-11 13:02:40

@Taboo Loco Zaktualizowana odpowiedź na krycie obrazu –

Dziękuję, że działa, jednak jest trochę dziwna, tak jak po najechaniu myszką na zakładane miejsce, w którym powinien być tekst, tekst nie pojawia się, a film się klikuje. –

@TabooLoco Tak się dzieje po najechaniu myszą na tekst (nie obraz), więc po prostu przeniosłem tekst z tyłu. Aby uzyskać lepszą poprawkę, musisz zmienić swoje oznaczenia, jak sugerują TheBronx i James King. Zobacz ** http: // jsfiddle.net/ZSZQK/5/** –

Spróbuj:

<div id="image"> 
    <img src="image.png"/> 
    <div class="hover">Test message</div> 
</div>

CSS:

#image { 
    position:relative; 
} 

#image .hover { 
    display:none; 
    position:absolute; 
    bottom:0; 
} 

#image:hover .hover { 
    display:block; 
}

zasadzie to, co zrobiłem, było:

Przeniesiony tekst div wewnątrz #image div.
Zmieniono id="hover" do class="hover"
Dodane display:block gdy #image się unosił i display:none czy nie.
Niektóre zasady pozycjonowania, to tylko szybki przykład, daj mi znać, jeśli to działa.

Źródło

2013-03-11 13:00:51 TheBronx

Dziękujemy, że faktycznie działa. Czy jest jakiś sposób, aby po najechaniu myszy sprawić, by obraz miał nieprzezroczystość do około 70% i umieścić tekst na obrazie? Podobnie jak tekst zostanie umieszczony na obrazie krycia, gdy ktoś najedzie myszą na obraz. –

Bez JavaScriptu możesz zrobić tak:

1.Ustawić #hoverdiv na wierzchu obrazu i ustawić opacity:0;

2.Than dodać to do CSS:

#hover:hover { 
    opacity:1 
    }

To powinno rozwiązać problem.

Źródło

2013-03-11 13:02:41 Tbi45

Jest tak wiele sposobów, aby to zrobić, ale jeśli chcesz CSS tylko podejście, trzeba by zrestrukturyzować html do czegoś podobnego:

<div id="image"> 
    <img src="image.png"/> 
    <div id="hover">Test message</div> 
</div>

A potem w CSS ukryć komunikat domyślnie :

#hover {display:none;}

wtedy komunikat:

#image:hover #hover {display:block;}

Źródło

2013-03-11 13:02:59

Nie trzeba restrukturyzować znacznika –

Tak, ale jeśli chcę dodać krycie do obrazu, tekst również staje się nieprzezroczysty: S –

tutaj jest rozwiązanie znalazłem na google

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
       <html xmlns="http://www.w3.org/1999/xhtml"> 
       <head> 
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
       <title>Untitled Document</title> 
       </head> 
       <style type="text/css"> 
       #mybox { 
       width:80px; 
       height:90px; 
       float:left; 
       background-color:#0F9; 
       padding:10px; 
       } 
       .Imgdiv { 
       width:80px; 
       height:20px; 
       margin:0px 0px 10px 0px; padding:0px; 
       cursor:pointer; 
       background-color:#39C; 
       } 
       #mybox .hiddenDiv { 
       left:0px; 
       display:none; 
       z-index:100; 
       width:80px; 
       height:50px; 
       margin:0px; 
       background-color:#336; 
       float:left; 
       } 
       #mybox:hover .hiddenDiv { 
       display:block; top:0px; left:8px; 
       } 
       </style> 
       <body> 
       <div id="mybox"> 
       <div class="Imgdiv"></div> 
       <div class="hiddenDiv"></div> 
       </div> 


       </body> 
       </html>

Źródło

2013-03-11 13:11:34

Witam Jeśli dobrze rozumiem, chcesz coś takiego:

<div id="wrapper"> 
    <div id="img-wrapper"> 
     <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSp7bY6nYWTDmFXKSlP4TdCe5ghVQhbt85tQMS8dfZMEGw7QOXiLA"> 
    </div> 
    <div id="text-wrapper"> 
     <p>Hello world!</p> 
    </div>   
</div>

CSS:

#wrapper{ 
    position:relative; 
    border:1px solid black; 
    width:102px; 
    height:102px; 
} 

#text-wrapper{ 
    position:absolute; 
    height:0px; 
    overflow:hidden; 
    font-size:14px; 
    font-family:Arial,Tahoma; 
    font-weight:bold; 

    transition: height 1s; 
    -moz-transition: height 1s; /* Firefox 4 */ 
    -webkit-transition: height 1s; /* Safari and Chrome */ 
    -o-transition: height 1s; /* Opera */ 

} 

#img-wrapper:hover + #text-wrapper{ 
    height:32px; 
    width:102px; 
}

Kluczem do osiągnięcia tego celu jest ta linia css:

#img-wrapper:hover + #text-wrapper{

Co to właściwie robi, to "Kiedy ja jestem er img-wrapper div zrobić kilka rzeczy w text-otoki div”

zobacz demo tutaj: http://jsfiddle.net/A9pNg/1/

Źródło

2013-03-11 13:19:59 Syd

Css najedź na zdjęcie - załaduj div

Odpowiedz

Powiązane problemy