Piwigo.org

marineraux · 2010-12-18 12:22:32

bonjour a tous et bon week-end

j'essaie imposer une opacité sur l'hover des miniatures de la page d'accueil :)

l'original

Code:

.content UL.thumbnails SPAN.wrap2:hover{ background-color: transparent ; border-color: #CCCCCC; color:#000000;}

.content UL.thumbnailCategories DIV.thumbnailCategory:hover{
-moz-border-radius-bottomleft:12px;
-moz-border-radius-bottomright:12px;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
background:#F2D59C url(images/msg_info_mbr.png) repeat-x scroll 0 0;
border:1px solid #919191;
color:#FF0000;
}

en essayant de placer ce code dans le background , je n'obtiens que cela : la photo est touché par l'opacité aussi :(

Code:

 filter:alpha(opacity=50);-moz-opacity:0.4;opacity: 0.4;}

Code:

.content UL.thumbnails SPAN.wrap2:hover{ background-color: transparent; border-color: #CCCCCC; color:#000000;}

.content UL.thumbnailCategories DIV.thumbnailCategory:hover{
-moz-border-radius-bottomleft:12px;
-moz-border-radius-bottomright:12px;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
background:#F2D59C url(images/msg_info_mbr.png) repeat-x scroll 0 0; filter:alpha(opacity=50);-moz-opacity:0.8;opacity: 0.8;}
border:1px solid #919191;
color:#FF0000;
}

j'ai essayé de le placer un peu partout je n'y arrive pas :(

une idée pour me faire avancer ?

merci à vous

cljosse · 2010-12-18 17:00:52

Bonjour.

Les opacités de chaque object imbriqués se multiplient donc on ne peut pas forcer la zone image a avoir une opacité supérieure au contenant.

Pour résoudre la moitié de ton problème je te propose:
d'exclure la class="thumbnail" et travailler sur la balise wrap1 au lieu de wrap2

.content UL SPAN.wrap1 :hover {
filter:Alpha(opacity=40);-moz-opacity:0.4;opacity: 0.4;
}

Ta zone sensilble sera divisée en deux une sur l'image et l'autre sur le texte.
L'effet sera un différent mais quand tu seras en dehors de la zone image ton image ne sera pas semi transparente, seul le test le sera.

Sinon il faudrait modifier au niveau de thumbnails.tpl, faire en sorte que l'image soit en dehors de la zone sensible ...

A+

marineraux · 2010-12-18 18:09:37

j'ai essayé une autre voie :)

remplir de couleur l'image : images/msg_info_mbr.png en jouant sur l'opacité !
et supprimer le code couleur .

Code:

 background: url(images/msg_info_mbr.png) repeat-x scroll 0 0;

mais il me faut trouver comment remplir la partie inférieur du cadre des miniatures !
merci de ton soutien ;)

Dernière modification par marineraux (2010-12-18 18:11:14)

Gotcha · 2010-12-19 23:33:58

C'est du CSS. Il faut chercher du coté de la hauteur.

ddtddt · 2010-12-22 21:51:28

marineraux est ce que ton problème est résolu ?

marineraux · 2011-01-04 21:42:40

désolé j'étais absent , non pas résolu tant pis je m'en passerai ;)

Gotcha · 2011-01-04 21:57:07

Si c'est sur internet, je peux toujours jeter un oeil (lien par MP).

;-)

marineraux · 2011-01-05 10:45:50

merci ; mp envoyé :)

marineraux · 2011-01-06 10:51:54

demande de style trop complexe ; sujet abandonné !
merci !! pour toutes les tentatives , mais à l'impossible nul n'est tenu :)

Piwigo.org

Annonce

#1 2010-12-18 12:22:32

histoire d'opacité ?

Code:

Code:

Code:

#2 2010-12-18 17:00:52

Re: histoire d'opacité ?

#3 2010-12-18 18:09:37

Re: histoire d'opacité ?

Code:

#4 2010-12-19 23:33:58

Re: histoire d'opacité ?

#5 2010-12-22 21:51:28

Re: histoire d'opacité ?

#6 2011-01-04 21:42:40

Re: histoire d'opacité ?

#7 2011-01-04 21:57:07

Re: histoire d'opacité ?

#8 2011-01-05 10:45:50

Re: histoire d'opacité ?

#9 2011-01-06 10:51:54

Re: histoire d'opacité ?

Pied de page des forums