Effets (grisé) transparent au survol HTML 5 ,CSS3
Résolu
Bonjour,
Je voudrais changer/améliorer 2 paramètres à changer :
- au survol un effet grisé/transparent des images + une indication textuel
help me please
ps, j'ai laissé un lien pour que vous voyer l'effet que je voudrais mettre en place
pic.twitter.com/5tSR68kD6a
Je voudrais changer/améliorer 2 paramètres à changer :
- au survol un effet grisé/transparent des images + une indication textuel
help me please
ps, j'ai laissé un lien pour que vous voyer l'effet que je voudrais mettre en place
pic.twitter.com/5tSR68kD6a
30 réponses
Résumé de la discussion
Un effet de survol grisé ou transparent sur les images accompagné d’une indication textuelle est recherché pour améliorer le rendu et l’aide contextuelle. Plusieurs solutions évoquées utilisent le CSS avec une superposition semi-transparente et un texte intégré, par exemple en employant des éléments overlay et la propriété opacity pour atteindre environ 0,8. Des exemples concrets montrent l’utilisation d’un fond gris et d’un opacifiant déclenché au survol, avec des valeurs hexadécimales et des règles comme display: none/inline pour rendre l’effet conditionnel. En parallèle, certains échanges portent sur la suppression d’un cadre noir et sur l’alignement précis des marges autour des images, avec des retours à venir sur ces ajustements.
-
salut,
j'ai acheter web builder 9.1...
Tu sais comment on récupère les codes HTML ?
merci -
Là je mange et je te dis sa plus tard.
Encore Merci !!!-
-
-
-
heu, si tu veux un truc qui ponde le code tout seul, tu peux utiliser un wysiwyg.
c'est un logiciel quui fait le code pour toi.
Mais sache que le code est mauvais. Mais quel est le problème ? le problème est que Google pénalise les erreurs de code (html) et retire des places dans le classement. ton site sera fait facilement mais ne sera pas visible facilement. Toute fois tu peux t'en servir et une fois fini tu passe au validateur et améliore le html.
validateur : http://validator.w3.org/
dreamweawer (gratuit 1 mois ) : https://www.clubic.com/telecharger-fiche10239-dreamweaver-cs6.html
blugriffon : http://www.bluegriffon.org/
il y en as d'autres...
si tu pense que ton problème est résolu, passe en résolu
a + -
-
-
Oula je me suis compliqué la vie, j'ai cru que tu voulais que je rajoute un petit angle noir qui lorsque l'on clique dessus fasse un tour en pointillé. pfff je suis bête...pas grave.
voici la solution :
a, a:hover, a:visited{
color: black;
text-decoration: none;
}
׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º× -
non non c'est de ma faute mon message n'était pas clair.
Sur cette photo il y a 4 petits traits (comme des artefacts, des parasites)
pic.twitter.com/v1Pa6lVJGw
...et je voudrais tout simplement qu'il n'apparaissent plus
pour que le rendu soit plus esthétique... -
salut, oui je les ai conservés, explique moi ce que tu veux exactement, je crois que hier j'étais fatigué et j'ai pas compris.
-
AILLE...
en faite je viens de me rendre compte de ma boulette...
J'ai du super mal m'exprimer ( et en effet c'est le cas...), il y a une gros méprise
on ne sait pas compris...
Mais c'est de ma faute, je suis désolé.
J'ai pas encore tester ta programmation mais de ce que j'ai vu j'ai l'impression que tu as conservé les "petits traits noirs" c'est ça ?
Parce que en faite moi je voulais les supprimer...
Si c'est ça je suis désolé... -
Salut,
je viens de le faire en css et en javascript, en plus tu aura le choix.
le nouveau html :
<body>
<div id="content">
<a href="Société.html" >
<div class="block">
<div class="opac">
<p>
texte image 1
</p>
</div>
<img src="Société.jpg" class="société tof" alt="société" />
</div></a>
<a href="Monde.html" >
<div class="block">
<div class="opac">
<p>
texte image 2
</p>
</div>
<img src="Monde.jpg" class="monde tof" alt="monde" />
</div></a>
<a href="#" >
<div class="block"><img src="coin.png" class="coin" alt="" />
<div class="opac">
<p>
texte image 3
</p>
</div>
<img src="Politique.jpg" class="Politique tof" alt="politique" /><span class="bord"></span>
</div></a><a href="#" >
<div class="block">
<div class="opac">
<p>
texte image 4
</p>
</div>
<img src="Economie.jpg" class="economie tof" alt="economie" />
</div></a><a href="#" >
<div class="block"><img src="coin.png" class="coin" alt="" />
<div class="opac">
<p>
texte image 5
</p>
</div>
<img src="surfeur.png" class="surfeur tof" alt="surfeur1" /><span class="bord"></span>
</div></a><a href="#" >
<div class="block"><img src="coin.png" class="coin" alt="" />
<div class="opac">
<p>
texte image 6
</p>
</div>
<img src="high-tech.jpg" class="high-tech tof" alt="high-tech" /><span class="bord"></span>
</div></a><a href="#" >
<div class="block"><img src="coin.png" class="coin" alt="" />
<div class="opac">
<p>
texte image 7
</p>
</div>
<img src="cinema.jpg" class="cinema tof" alt="cinema" /><span class="bord"></span>
</div></a><a href="#" >
<div class="block">
<div class="opac">
<p>
texte image 8
</p>
</div>
<img src="people.jpg" class="people tof" alt="people" />
</div></a>
</div>
</body>
le nouveau css :
<style type="text/css">
#content {
width: 960px;
margin: auto;
position: relative;
}
.block {
width: 230px;
height: 210px;
position: relative;
display: inline-block;
border: 0px;
}
img.tof {
width: 210px;
height: 180px;
position: absolute;
top: 16px;
left: 10px;
}
.opac {
width: 210px;
height: 180px;
position: absolute;
top: 16px;
left: 10px;
background-color: white;
opacity: 0.8;
z-index: 10;
display: none;
}
p {
text-align: center;
font-size: 1.5em;
margin-top: 80px;
}
.block:hover > .opac {
display: inline;
}
a, a:hover, a:visited {
color: black;
}
a div.block img {
border: 0;
}
.bord {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -10;
}
.coin {
position: absolute;
bottom: -19px;
right: -25px;
width: 50px;
height: 50px;
}
si tu veux avec JavaScript tu rajoute en bas de page juste avant </body>
<script type="text/javascript">
var img = document.getElementsByClassName("coin");
var len = img.length;
for (var i = 0; i < len; i++) {
img[i].onmousedown = function() {
this.parentNode.childNodes[5].style.border = "1px dotted black";
}
img[i].onmouseup = function() {
this.parentNode.childNodes[5].style.border = "none";
}
img[i].onmouseout = function() {
this.parentNode.childNodes[5].style.border = "none";
}
}
</script>
si tu veux en css tu rajoute à ton css :
.coin:active ~ span.bord{
border: 1px dotted black;
}
Le petit coin je me suis pas prit la tête j'en ai mis un gros, mais tu pourra mettre ce que tu veux.
tu peu le télécharger ici pour les essais : http://pour-ccm.zz.mu/coin.png
si tu veux voir avec javascript c'est là :
http://pour-ccm.zz.mu/indexx.html
si tu veux voir en css c'est là :
http://pour-ccm.zz.mu/indexxx.html
pour le faire et bien voir l'effet j'ai retirer les liens tu les block correspondant, il faudra les remettre.
Bonne chance
׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º× -
tu vois sur la 2nd photo
pic.twitter.com/v1Pa6lVJGw
en faite j'ai la possibilité de clicker sur la photo ou sur le petit trait noir.
Quand je clicke sur le petit trait noir sa me fait un petit cadre en pointillé et m'envoi aussi sur la page correspondante -
Ou est ce que tu as appris la maitrise HTML 5 et CSS3 ?
moi j'ai appris les base sur le siteduzero.com -
ok je te le fait, mais ca va compliquer
-
ok... presque parfait.
j'ai encore 2 choses à mon avis plus dure à solutionner :
1- il y a sa pic.twitter.com/cnd8L3sZc9
en gros il y a un petit trait noir sur 4 photos
2- quand je clicke sur le petit trait noir sa me fait un cadre autout et pas sur les autres
pic.twitter.com/v1Pa6lVJGw
.... -
je vois ça et je te tiens au courant dans l'immédiat...
-
Salut,
pour la 1 c'est parce que tu es sous explorer.
essaye :
a div.block img {
border: 0;
}
pour la 2
tu joue avec la position absolute (top, right, bottom, left ) et des valeur en pixel
si tu veux descendre de 10 px, tu fait top : 10px;
.opac {
width: 210px;
height: 180px;
position: absolute;
top : 10px;
background-color: white;
opacity: 0.8;
z-index: 10;
display: none;
}
׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º× -
On y est presque... ouf !
je voudrais juste...
1- je ne sais pas si tu vois mais il y a comme un cadre Noir autour des photos
j'aimerais le supprimer (ne pas avoir de cadre noir).
2- le cadre blanc ne se cale pas parfaitement sur la photo...
j'aimerais qu'il colle parfaitement au cadre...
Merci beaucoup
à tout de suite -
pic.twitter.com/ih51wRgQU6 je t'ai fait une capture d'écran du site...
mais pas besoin de te presser parce que après 3 heures j'ai les yeux injectés de sang...
au dodo
en tout cas merci beaucoup c'est vraiment sympa d'aider comme ça !
encore merci -
et vous voye l'effet bleu (du lien) qui devient violet (après avoir clicker dessus) ?
cette chose horrible je voudrais l'enlever aussi -
ce serai possible de les espacer un peu plus ?
-
je te l'ai fait là
http://pour-ccm.zz.mu/
-
ps; il y'a plein de truc inutile sur le css
-
et mon code css
p
{
color: blue;
font-family: Trebuchet MS
}
h1
{
color: black;
font-size: 40px;
}
h2, em
{
color: black; /* SA c'est une balise pour rappelez un commentaire sur l'attribut donné par ex */
text-align: center
}
.introduction
{
color: brown;
font-size: xx-large;/*il y aussi large et medium*/
}
.salutations
{
color: black;
font-size: xx-small;
}
.etoui
{
color; black;
font-size: 15em; /*d'autres balise à virgule mais attention il faut écrire un point "."*/
}
.dro
{
float: left
border:2px solid black;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
p1
{
font-family: Courier
}
p2
{
font-family: Courier
}
.deepinside
{
float: left
-moz-border-radius:10000000000000000000001px;
-webkit-border-radius:100000000000000000000001px;
border-radius:70000000000000000000000px;
}
body
background-image: url("texture verte.jpg");
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:10px;
}
body
{
background-color:white;
border: 2px solid white;
padding:5px;
-moz-border-radius:10px ;
-webkit-border-radius:10px;
border-radius:10px ;
}
a /* Liens par défaut (non survolés) */
{
text-decoration: none;
color: white;
}
a:hover /* Apparence au survol des liens */
{
color: white
}
.conteneur
{
text-align: center
}
- 1
- 2
Suivant
