Test img survol

Sujet: Test img survol Ven 18 Nov - 23:59

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.

Sujet: Re: Test img survol Lun 21 Nov - 1:10

Code:: /* CONTENU INFOBULLE GROUPES */

.bouh {
width: 300px;
height: 96px;
margin: auto;
overflow: auto;
background-color: #000000;
color: #ffffff;
text-align: justify;}

.bouh a {
padding: 5px;
margin: 5px 0 0 0;
display: inline-block;
background-color: #000000;
color: #666666;
text-decoration: none;}

.bouh a:hover {
color: #ffffff;}

/* INFOBULLE 1A */

.infobulle1a {
display: inline-block;
}

.infobulle1a > div {
position: absolute;
margin-top: -24px;
margin-left: 250px;
opacity:0;
transition: opacity 1s ease;
visibility: hidden;}

.infobulle1a:hover > div {
opacity: 1;
visibility: visible;}

/* INFOBULLE 2A */

.infobulle2a {
display: inline-block;
}

.infobulle2a > div {
position: absolute;
margin-top: -24px;
margin-left: 130px;
opacity:0;
transition: opacity 1s ease;
visibility: hidden;}

.infobulle2a:hover > div {
opacity: 1;
visibility: visible;}

/* INFOBULLE 1B */

.infobulle1b {
display: inline-block;
}

.infobulle1b > div {
position: absolute;
margin-top: -48px;
margin-left: 250px;
opacity:0;
transition: opacity 1s ease;
visibility: hidden;}

.infobulle1b:hover > div {
opacity: 1;
visibility: visible;}

/* INFOBULLE 2B */

.infobulle2b {
display: inline-block;
}

.infobulle2b > div {
position: absolute;
margin-top: -48px;
margin-left: 130px;
opacity:0;
transition: opacity 1s ease;
visibility: hidden;}

.infobulle2b:hover > div {
opacity: 1;
visibility: visible;}

/* INFOBULLE 1C */

.infobulle1c {
display: inline-block;
}

.infobulle1c > div {
position: absolute;
margin-top: -72px;
margin-left: 250px;
opacity:0;
transition: opacity 1s ease;
visibility: hidden;}

.infobulle1c:hover > div {
opacity: 1;
visibility: visible;}

/* INFOBULLE 2C */

.infobulle2c {
display: inline-block;
}

.infobulle2c > div {
position: absolute;
margin-top: -72px;
margin-left: 130px;
opacity:0;
transition: opacity 1s ease;
visibility: hidden;}

.infobulle2c:hover > div {
opacity: 1;
visibility: visible;}

/* INFOBULLE 1D */

.infobulle1d {
display: inline-block;
}

.infobulle1d > div {
position: absolute;
margin-top: -96px;
margin-left: 250px;
opacity:0;
transition: opacity 1s ease;
visibility: hidden;}

.infobulle1d:hover > div {
opacity: 1;
visibility: visible;}

/* INFOBULLE 2D */

.infobulle2d {
display: inline-block;
}

.infobulle2d > div {
position: absolute;
margin-top: -96px;
margin-left: 130px;
opacity:0;
transition: opacity 1s ease;
visibility: hidden;}

.infobulle2d:hover > div {
opacity: 1;
visibility: visible;}

» test pa v3
» Test slideshow
» test onglets