CSS /java script hover image

Salutare,

Am si eu o rugaminte daca se poate sa ma ajutati , as vrea sa fac un image hover (tip eticheta) atunci cand treci cu mouse-ul pe el si pe eticheta sa pun un buton de download si ceva text. Va atasez imaginea, dar fara a face reclama acest effect hover este prezent pe scribd.


Multumesc

Cauta solutii cu jquery: http://www.sundogint...query-hover-box

Nu-i neaparat de jQuery, poti realiza asta si cu CSS.

//clasa pe care vei face hover
.main {
position: relative;
}
//clasa care va aparea
.pop-up {
position: absolute;
display: none;
si ii pui tu o pozitie care sa fie similara cu aia, o rezolvi tu din margin
}
//this is where the magic happens
.main:hover > .pop-up {
display: block;
}

//in html o sa ai cv de genul

<div class="main">

<p>Lorem ipsum dolor sit amet consectetur adipiscing bla bla elit...</p>

<div class="pop-up">
Aici bagi ce ai de bagat poze text si butonu ala de download.
</div><!-- .pop-up end -->

</div><!-- .main end -->

Voila, done.

Edited by Alexandrwc, 25 September 2014 - 14:42.

Sunt cam ruginit ca n-am mai lucrat de ceva ani in CSS, dar codul tau impinge elementele prin pagina, sau le poti face sa se ascunda, dar nu deschide popup deasupra lor.
Desi presupun ca s-ar putea face similar unui meniu dropdown daca te chinui... insa apar probleme la unele browsere, pe cand cu javascript vei avea un rezultat constant si mai usor de realizat.

SfPetru, on 25 septembrie 2014 - 16:56, said:

Nu impinge nimic prin pagina, daca te uiti atent ai sa vezi ca are "position: absolute;"
Si obtii acelas rezultat in toate browserele.

Am observat ca e oarecum incomplet css-ul, ar mai merge adaugat si urmatorul cod:

.pop-up:hover { display: block; }

Pentru ca banuiesc ca o sa vrei sa dai click prin pop-up si nu vei putea pentru ca imediat ce scoti mouse-ul de pe .main, .pop-up devine invizibil.

Iata codul testat daca nu crezi ca merge http://jsfiddle.net/1028q8sq/

Edited by Alexandrwc, 25 September 2014 - 17:41.

Si ca sa ii fac pe plac si lui SfPetru:

$('.main').on('click', function() {
if($(this).children('.pop-up').hasClass('active')) {
	 $(this).children('.pop-up').removeClass('active');
}
else { $(this).children('.pop-up').addClass('active'); }
})

Si ii faci tu ce ii faci clasei active cu display: none bla bla ce am scris mai sus.

Edited by Alexandrwc, 25 September 2014 - 18:15.

Desigur, poti face .addClass() cu .on('mouseenter') si .removeClass() cu .on('mouseleave');