DIV par dessus d'une image
Résolu
meuhlol
Messages postés
1896
Date d'inscription
Statut
Membre
Dernière intervention
-
le hollandais volant Messages postés 4998 Date d'inscription Statut Membre Dernière intervention -
le hollandais volant Messages postés 4998 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai une page avec les miniatures. Je souhaite qu'au passage de la souris sur la miniature, un "cadre" (div) noir, semi transparent soit affiché par dessus de la miniature.
Comme sous windows, dans un dossier avec les images, affichage "miniatures", quand on sélectionne une image, celle-ci s'entoure d'un cadre (couleur bleu de windows si par défaut). Moi j'aimerais avoir à peu près le même effet mais au survol de mes miniatures sur ma page web.
J'ai creusé un peu dans ce sens là:
mais au passage de la souris le bloc s'agrandit à 125x125px avec l'image. Alors que j'aimerais avoir un "carré" semi-transparent par dessus de l'image!
J'ai pensé un moment de faire pour chaque image un div, et charger l'image en tant que background. Mais j'ai environ une 50aine de miniatures, alors pour chaque miniature un div avec ses paramètres... ça va faire trop!
S'il vous plaît, besoin de coup de main :)
Merci d'avance!
p.s. voici en image ce que je souhaiterais avoir comme résultat:
https://imageshack.com/
p.s. 2: je ne veux pas utiliser JavaScript de préférences! CSS+Html :)
J'ai une page avec les miniatures. Je souhaite qu'au passage de la souris sur la miniature, un "cadre" (div) noir, semi transparent soit affiché par dessus de la miniature.
Comme sous windows, dans un dossier avec les images, affichage "miniatures", quand on sélectionne une image, celle-ci s'entoure d'un cadre (couleur bleu de windows si par défaut). Moi j'aimerais avoir à peu près le même effet mais au survol de mes miniatures sur ma page web.
J'ai creusé un peu dans ce sens là:
#container1{ //je garde dedans les miniatures
width: 600px;
text-align: center;
}
.over:hover { //class pour les images
width: 125px;
height: 125px;
top: 2px;
position: relative;
background-color: #000000;
z-index: 1;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
opacity:0.5;
}
.over {
width: 120px;
height: 120px;
border-color: #405190;
border-width: 2px;
background-color:#000000;
z-index: 10;
}
/*-------------------------------*/
<div id="container1"><a href="images/image1.png" target="_blank"><img src="images/image1min.png" width="120" height="120" hspace="5" vspace="5" class="over"></a></div> //pareil avec les autres miniatures
mais au passage de la souris le bloc s'agrandit à 125x125px avec l'image. Alors que j'aimerais avoir un "carré" semi-transparent par dessus de l'image!
J'ai pensé un moment de faire pour chaque image un div, et charger l'image en tant que background. Mais j'ai environ une 50aine de miniatures, alors pour chaque miniature un div avec ses paramètres... ça va faire trop!
S'il vous plaît, besoin de coup de main :)
Merci d'avance!
p.s. voici en image ce que je souhaiterais avoir comme résultat:
https://imageshack.com/
p.s. 2: je ne veux pas utiliser JavaScript de préférences! CSS+Html :)
A voir également:
- DIV par dessus d'une image
- Image iso - Guide
- Légender une image - Guide
- Recherche par image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
7 réponses
Bonjour,
Je ne suis pas certain d'avoir tout compris de votre requête!
Toutefois, essayez de compléter votre .css avec:
(c'est peut-être judicieux de ne pas passer par un container, mais plutôt par un tableau <table> et autant de <tr> et de <td> que nécessaires ...définis par une seule classe)
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
.css
.over span
{
display: none
}
.over:hover span
{
/*les nouveaux arguments càd les effets que vous souhaitez obtenir, comme pour une info-bulle*/
position: absolute;
display:block;
border: _px solid #_ _ _ ;
top: _px; /*position depuis le haut*/
left: _px; /*position depuis le bas*/
filter:_;
filter:_
}
et sans le over:hover qui est désormais inutile
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
.html
<table>
<tr>
<td><a href="_.htm" class="over"><img src="_/_.png> border="_" ... ... alt="#" />
<span>
<img src="... ... alt="#" />
</span>
</a>
</td>
<td>
...
</td>
</tr>
<tr>
<td>
...
</td>
</tr>
</table>
Je ne suis pas certain d'avoir tout compris de votre requête!
Toutefois, essayez de compléter votre .css avec:
(c'est peut-être judicieux de ne pas passer par un container, mais plutôt par un tableau <table> et autant de <tr> et de <td> que nécessaires ...définis par une seule classe)
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
.css
.over span
{
display: none
}
.over:hover span
{
/*les nouveaux arguments càd les effets que vous souhaitez obtenir, comme pour une info-bulle*/
position: absolute;
display:block;
border: _px solid #_ _ _ ;
top: _px; /*position depuis le haut*/
left: _px; /*position depuis le bas*/
filter:_;
filter:_
}
et sans le over:hover qui est désormais inutile
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
.html
<table>
<tr>
<td><a href="_.htm" class="over"><img src="_/_.png> border="_" ... ... alt="#" />
<span>
<img src="... ... alt="#" />
</span>
</a>
</td>
<td>
...
</td>
</tr>
<tr>
<td>
...
</td>
</tr>
</table>
salut à vous !
C'est bien compliqué votre code là ! Pourquoi faire tout ça ?
et si tu met :
<img src="" alt="" class="over"/>
img.over {
border: 5px color solid; /* couleur, doit être la couleur de fond de page */
}
img.over:hover {
border: 5px blue solid;
}
Le cadre ne sera pas semi transparent, pour celà, il faut faire soit un cadre en couleur "rgba(rrr,ggg,bbb, alpha)" mais évidement IE ne prendre pas ça en compte. ou faire un div autour. En position absolute. un z-index: -1; et une opacité réduite. Là tu met le hover avec la bordure que tu veux.
Tu ouvre le div, et tu la referme tout de suite.
Tu étire ce div au bord du conteneur avec en css :
top: 0;
left:0;
right: 0;
bottom: 0;
ensuite, tu crée un seconde div. Tu y met le premier div (qui ne contient rien) et l'image. Ce second div est en position relative et un z-index de 10 par exemple.
C'est bien compliqué votre code là ! Pourquoi faire tout ça ?
et si tu met :
<img src="" alt="" class="over"/>
img.over {
border: 5px color solid; /* couleur, doit être la couleur de fond de page */
}
img.over:hover {
border: 5px blue solid;
}
Le cadre ne sera pas semi transparent, pour celà, il faut faire soit un cadre en couleur "rgba(rrr,ggg,bbb, alpha)" mais évidement IE ne prendre pas ça en compte. ou faire un div autour. En position absolute. un z-index: -1; et une opacité réduite. Là tu met le hover avec la bordure que tu veux.
Tu ouvre le div, et tu la referme tout de suite.
Tu étire ce div au bord du conteneur avec en css :
top: 0;
left:0;
right: 0;
bottom: 0;
ensuite, tu crée un seconde div. Tu y met le premier div (qui ne contient rien) et l'image. Ce second div est en position relative et un z-index de 10 par exemple.
erratum: j'ai écrit 2 fois <img src="_/_.png> en omettant de fermer avec "
Mais bien sûr, vous aviez déjà rectifié! Mille excuses ...
Mais bien sûr, vous aviez déjà rectifié! Mille excuses ...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bonjour et merci de votre réponse.
J'ai déjà tenté de déplacer class=over dans le <a en vain --> l'image reste là, au premier plan.
En ce qui concerne les tableaux - j'essaye de les éviter :) Et de même, essayant comme vous l'avez écrit dans votre exemple ça marche pas. L'image reste là. Hors que je veux que l'image soit "couverte" par un carré semi-transparent.
Comme sur l'image que j'ai dessiné.
J'ai déjà tenté de déplacer class=over dans le <a en vain --> l'image reste là, au premier plan.
En ce qui concerne les tableaux - j'essaye de les éviter :) Et de même, essayant comme vous l'avez écrit dans votre exemple ça marche pas. L'image reste là. Hors que je veux que l'image soit "couverte" par un carré semi-transparent.
Comme sur l'image que j'ai dessiné.
Bonjour, en effet j'ai laissé tomber cette idée de "div par dessus", j'utilise une bordure et la transparence, qui donnent un assez jolie effet en général :)
CSS:
HTML:
Donc pour l'encadrement c'est résolu.
CSS:
#container1{width: 568px; text-align: center; background-color: #f4f5fb; -webkit-box-shadow: 0px 2px 15px #2E3865; -moz-box-shadow: 2px 2px 20px #2e3865;}
#mini {overflow:auto; list-style:none; margin:0px; padding:0;}
#mini li {float:left;}
#mini a {display:block; padding:10px; outline:none; opacity:0.4; filter: alpha(opacity=40); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);}
#mini a:hover, #mini a:focus {background-color: #bfc1d7; opacity:1.0; filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
.img {border-color: #999; border-width: 1px;}
HTML:
<div id="container1">
<ul id="mini">
<li>
<a href="image_grande.png" target="_blank" class="">
<img src="image_petite.png" title="cliquez pour agrandir" alt="description_par_ici" class="img"></a></li>
<li></ul></div>
Donc pour l'encadrement c'est résolu.