Salut
Si j'ai bien compris tu veux quelques chose de ce style là ?
Je vois 2 solution à ton problème :
1ère solution:
Tu te sers d'images pour les 3 logos que tu souhaite faire apparaître et il faut alors les insérer dans ton code HTML à l'intérieure de la section
.blur comme ceci :
<section class="blur">
<img src="images/cabrito.png" alt="Cabrito-Serif" title="Cabrito" />
<p>
<strong> Cabrito - </strong> Serif
</p>
<div id="icones">
<img src="images/logo1.png" alt="logo" class="logo" />
<img src="images/logo2.png" alt="logo" class="logo" />
<img src="images/logo3.png" alt="logo" class="logo" />
</div>
</section>
OU
comme ceci :
<section class="blur">
<img src="images/cabrito.png" alt="Cabrito-Serif" title="Cabrito" />
<p>
<strong> Cabrito - </strong> Serif
</p>
</section>
<div id="icones">
<img src="images/logo1.png" alt="logo" class="logo" />
<img src="images/logo2.png" alt="logo" class="logo" />
<img src="images/logo3.png" alt="logo" class="logo" />
</div>
à savoir que leur place peut impacter (avant ou après la
section)
car ensuite en CSS on aura :
.blur
{
...
/* pour placer ta section ou tu veux rajoute ça après l'avoir défini en "block" */
position: absolute;
top: X px;
left: Xpx;
}
#icones
{
display: block;
position: absolute;
top: 5px;
right: 5px;
/* positionnement en haut à droite (par rapport à la bordure du haut et celle de droite de la "section")*/
height: X px; /* dimensions du rectangle "div" qui contiendra les 3 logos */
width : X px;
}
.logo
{
display: inline-block;
height: ...
width: ...
margin: ...
opacity: 0;
/* pour que l'apparition soit progressive [smile] */
-webkit-transition-delay: 0.5s;
-webkit-transition: 0.5s opacity;
-moz-transition-delay: 0.5s;
-moz-transition: 0.5s opacity;
transition-delay: 0.5s;
transition: 0.5s opacity;
}
/* et là pour faire apparaitre -> magie magie ! [cligne] */
.blur:hover .logo
{
opacity: 1;
-webkit-transition-delay: 0.5s;
-webkit-transition: 0.5s opacity;
-moz-transition-delay: 0.5s;
-moz-transition: 0.5s opacity;
transition-delay: 0.5s;
transition: 0.5s opacity;
}
*Et une astuce si tu veux savoir où est ton rectangle
div qui contient tes logos, rajoute en CSS dans ses propriétés :
border: 1px solid white;
__ Si tu met ton
div après la section tu peut l'atteindre aussi de la mais comme ceci :
.blur:hover ~ .logo
{
...
...
...
}
Le mettre après te permettra de faire du bloc un élément indépendant !
=> Donc la position
absolute changera, elle ne dépendra plus de l'image flou d'en dessous
Et enfin
2e solution :
Mettre l'image à flouter en 'background' sur la section blur avec :
}
...
background-image: url('images/cabrito.png');
...
}
(en CSS)
*le flou (filtre) sera à appliquer sur la
section et non plus sur l'image.
tu peux garder le même code HTML pour la div.
À toi de choisir :
-> soit en élément indépendant ; alors il faut mettre la div après la section + le bout de code CSS pour l'atteindre :
.blur:hover ~
.logo
-> soit à l'intérieure de la section ; sa position dépendra alors des bordures que tu fixera à la
section
** Si tu n'arrives pas à faire apparaître par dessus peut-être faut-il mettre 'position: absolute;' pour la
section et 'position: relative;' pour la
div
Voilà j'espère que ça t'aura aidé,
N'hésite pas à me demander si tu as des problèmes.
Bonne journée !
