Hover technika

[gibek2 12]

Witam, znacie może jakąś prosta technikę jak można uzyskać taki hover, chodzi mi głównie o te ikonki co się pokazały bo zdjęcie to pewnie manipulacja opacity

 

 

[PrecelusMaximus 53]

jquery, hover, lub mouse

 

 

Robisz diva w którym umieszczasz foteczkę, nadajesz mu selector a później za pomocą niego hoverem lub mouse'ami manipulujesz divem, np przez .css() możesz też użyć animate() bądź .addClass()

$('.foteczka').hover(function(){
  $(this).css(...) //cos co sie dzieje jak najdziesz
 }
 function(){
  $(this).css(...) //cos co sie dzieje jak zjedziesz
 }
);

Możesz w tym divie z fotkami też schować kilka divów.

np:

<div class="foteczka">
 <div class="norma">
 ....
 </div>
 <div class="hover">
 ...
 </div>
</div>

Lub jakąś inną konfiguracje. Wrzucić w .norma zdjęcie (lub już w .foteczka), schować .hover(np. przez display:none w css) a gdy najedziesz uaktywnić .hover który da efekt opacity + te ikonki.

[wlodziu 49]

Można to zrobić w samym CSS, bez użycja JS.

<div class="zdj">
<div class="menu"></div>
</div>

CSS:

.zdj .menu { display: none; }
.zdj:hover .menu { display: block; }

[maniack 403]

.

Edytowano Wrzesień 13, 2017 przez maniack (zobacz historię edycji)

[gibek2 12]

Super, dziękuję wszystkim