CSS Opacitate / Transparență. Efectul Hover transparent. Proprietatea opacity. :hover selector.

Susține Lectii-Virtuale!

Efectul Hover transparent

Proprietatea opacity este adesea folosită împreună cu :hover selector pentru a modifica opacitatea cu mouse-over:





Exemplu:

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

Exemplu explicat:

Primul block CSS este similar cu codul din Exemplul 1. În plus, am adăugat ce ar trebui să se întâmple atunci când un utilizator trece peste una dintre imagini. În acest caz, dorim ca imaginea să nu fie transparentă atunci când utilizatorul trece peste ea. CSS- ul pentru aceasta este opacity:1;.

Când indicatorul mouse-ului se îndepărtează de imagine, imaginea va fi din nou transparentă.

Un exemplu de efect reversed hover:




Exemplu:

img:hover {
  opacity: 0.5;
  filter: alpha(opacity=50); /* Pentru IE8 și versiunile anterioare */
}