Skin 1804 - Boîtes survolées (image / texte)
Exemple avec la skin 1804
Les 6 images correspondent à 6 boîtes positionnées dans Config Accueil (ce sont les boîtes de l'éditorial).
C'est dans le fichier styleplus.css que ces boîtes sont configurées :
#EditoBoxes { max-width: 1540px; /*largeur maximun de l'éditorial*/ margin: auto; } /*hauteur des boîtes*/ #EditoBoxes .row.E0row0 .tbl, #EditoBoxes .row.E0row0 .tblover, #EditoBoxes .row.E0row1 .tbl, #EditoBoxes .row.E0row1 .tblover { margin: 0; height: 322px; padding-right: 50px; padding-left: 50px; } /*couleur des liens sur l'image*/ #EditoBoxes .row.E0row0 .tbl a, #EditoBoxes .row.E0row0 .tbl p, #EditoBoxes .row.E0row1 .tbl a, #EditoBoxes .row.E0row1 .tbl p { color: transparent; } /*couleur des liens survolés*/ #EditoBoxes .row.E0row0 .tblover a, #EditoBoxes .row.E0row0 .tblover p, #EditoBoxes .row.E0row1 .tblover a, #EditoBoxes .row.E0row1 .tblover p { color: #fff; line-height: 322px; /*hauteur de la ligne*/ } #EditoBoxes h5 a { /*taille des liens*/ font-size: 28px; } #EditoBoxes .row .col { /*alignement vertical*/ vertical-align: middle; } .col.col0.wcol0E00 .tbl { /* ligne 0 - colonne 0 - fillette*/ background: url(img/fillette.png) no-repeat 50% 50%; } .col.col0.wcol0E00 .tblover { /* ligne 0 - colonne 0 - fillette - SURVOL*/ background: #ffcc00; /*jaune*/ } .col.col1.wcol1E00 .tbl { /* ligne 0 - colonne 1 - bebe*/ background: url(img/bebe.png) no-repeat 50% 50%; } .col.col1.wcol1E00 .tblover { /* ligne 0 - colonne 1 - bebe - SURVOL*/ background: #ee61a0; /*rose*/ } .col.col2.wcol2E00 .tbl { /* ligne 0 - colonne 2 - garçon*/ background: url(img/garcon.png) no-repeat 50% 50%; } .col.col2.wcol2E00 .tblover { /* ligne 0 - colonne 2 - garçon - SURVOL*/ background: #1fbffd; /*bleu*/ } .col.col0.wcol0E01 .tbl { /* ligne 1 - colonne 0 - homme*/ background: url(img/homme.png) no-repeat 50% 50%; } .col.col0.wcol0E01 .tblover { /* ligne 1 - colonne 0 - homme - SURVOL*/ background: #ff6a00; /*orange*/ } .col.col1.wcol1E01 .tbl { /* ligne 1 - colonne 1 - nageurs*/ background: url(img/nageurs.png) no-repeat 50% 50%; } .col.col1.wcol1E01 .tblover { /* ligne 1 - colonne 1 - nageurs - SURVOL*/ background: #9929bd; /*violet*/ } .col.col2.wcol2E01 .tbl { /* ligne 1 - colonne 2 - femme*/ background: url(img/femme.png) no-repeat 50% 50%; } .col.col2.wcol2E01 .tblover { /* ligne 1 - colonne 2 - femme - SURVOL*/ background: #62a27a; /*vert*/ }
Date de création : 18/09/2018 @ 19:37
Catégorie : Trucs et astuces -
Page lue 447 fois
Catégorie : Trucs et astuces -
Page lue 447 fois