Effets (grisé) transparent au survol HTML 5 ,CSS3 [Résolu/Fermé]

Signaler
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013
-
 larose6996 -
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


30 réponses


ok je te le fait, mais ca va compliquer
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

Ou est ce que tu as appris la maitrise HTML 5 et CSS3 ?


moi j'ai appris les base sur le siteduzero.com
Utilisateur anonyme
Le site du zero (openclassroom ) est génial pour apprendre. HTML et CSS c'est simple. Une fois que tu y arrive bien, tu peux passer à php/mysql (c'est pas mal ça ) et/ou JavaScript (très intéressant aussi )

Mais apprends déjà bien le html et css, c'est la base.

Le truc noir je comprends pas à quoi sa sert !!!!
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

je sais pas....
Utilisateur anonyme
tu le veux tout de même ?
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

si possible mais bon je veux pas non plus t'embeter plus que ça...
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

en plus je commence à fatiguer (l'ordi sa tue les yeux)
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

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
Utilisateur anonyme
ok je le fait, mais pour demain
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

pas de problème t'en fait dejà trop je suis un cancre...


si t'as un jour une question en biologie tu sais ou je suis
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

bonne nuit et encore merci


c'est cool !
Utilisateur anonyme
de rien
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

à demain soir... vers 23h
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|[׺°"~'"°º×
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é...
sa m'énerve si c'est ça...


désolé

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.
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...
Utilisateur anonyme
ha oui je comprends, je les ai vu et j'ai pas tilter....je vais essayer
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|[׺°"~'"°º×
Là je mange et je te dis sa plus tard.


Encore Merci !!!
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

on reste en contact !
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

et encore merci
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

une derniere chose
je cherche juste à changer la police tu sais le texte qui apparait quand les photos se grise....

mais sa ne fonctionne pas

je voudrais mettre font-family: century gothic;
salut,
j'ai acheter web builder 9.1...

Tu sais comment on récupère les codes HTML ?


merci
non je sais pas du tout, désolé
ok, merci


bon courage ...


et encore merci pour ton aide