28172 sujets

CSS et mise en forme, CSS3

Menu image/texte hover probleme

Bien le bonjour ! c'est mon premier post ici( en réalité j'ai beaucoup hésité , peur qu'on se moque de moi x) ), donc j'apprend un peu tout ca par moi même étant donné que je fais isn en spé au lycée mais aujourd'hui en voulant faire quelque chose qui me paraissait simple j'ai rencontré pas mal de problème !

Donc sur le site que je vais posté ci-dessous quand on passe sur l'image d'une actualité, le texte s'affiche, c'est la même chose que je cherche a réaliser, et en bonus pourquoi pas les hachure que je trouves assez classe ^^ : http://www.urban-comics.com/

j'ai commencé dans mon html par faire deux div comme ceci :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>

<body>
<div id="1"><img src="images/green.jpeg"/></div>

<div id="2">blblblbllb</div>

</body>
</html>


et donc dans le css je me suis dit tout est question opacité ! mais en faite rien ne fonctionne :


#1{
display: block;
width:500px;
height:300px;

}

#2{
display: block;
width:800px;
height:600px;
opacity:0;
}

#2:hover{
width:320px;
height:200px;
opacity:1;
}


J'pense que la solution est tout bête mais je cherche à faire quelque qui y ressemble le plus, et si c'est possible de m'expliquer je vous remercie, c'est toujours ça d'appris !
En espérant ne pas trop déranger pour des broutilles !
Modifié par 6l20 (18 Dec 2013 - 10:40)
Modérateur
Bonjour et bienvenue!

Draaama a écrit :
isn en spé au lycée

Et moi FtmJk en IBB à l’uni. Quoi fallait pas se moquer? ok, abordons le problème.

Le premier problème vient de tes ids. En effet, les ids doivent commencer par une lettre, et non un chiffre.

Ensuite pour faire ce genre d'effet: généraleent on utilise plutôt la balise <a> qui permet d'être ciblée par différents dispositifs.

Ensuite on crée une structure qui elle sera toujours visible, c'est à l'intérieur que le texte apparaîtra.

Un exemple:


<a href="mapage" id="foo">
  <img src="image.jpg" alt="truc" width="400" height="300">
  <span>Ma super image!</span>
</a>


et le css: 


#foo {
  display: block;
  position: relative; /** le positionnement relatif servira comme référence pour le positionnement absolu suivant **/

}
#foo span {
  display: none; /** on cache le texte par défaut **/
  position: absolute; /** le positionnement absolu va permettre de passer le texte par-dessus l'image**/
  top: 5px;
  left: 5px;
  width: 390px;
  background: white;
}
/** on n'afiche le contenu que au hover ou au focus **/
#foo:hover span, #foo:focus span {
  display: block;
}

Bien sûr, il reste encore tout le problème des interface tactile, mais le fonctionnement de base est là.
Bonjour.

En fait sur le site en question, ils utilisent le javascript pour faire l'effet de hover, mais tu peux tout à fait le faire en CSS.

Sur le même modèle que kustolovic et en même temps que celui du site et en le faisant rapidement, on a un truc du genre -> LIEN
Il faudra sûrement optimiser le code, rajouter les préfixes pour les différent navigateurs, choisir une autre police d'écriture...

Si tu as des questions sur le css, tu peux bien sûr demander de l'aide.
Merci j'ai compris le principe !

Par contre j'ai une autre question, et je ne sais pas si je devrais la posté sur le même sujet.
J'ai un projet à faire pour la fin d'année et pour notre on aimerais faire une menu assez spécial, un menu cube 3d qui au survol de la souris s'éclate de cette façon :http://debray-jerome.developpez.com/demos/3d/cubeinteract.html ,sans la rotation, puis les faces par une animation se déplacent d'une façon stylisé comme ça :http://www.mrdoob.com/lab/javascript/threejs/css3d/periodictable/
mais en plus simple évidement afin de venir vers nous et faire un menu avec 6 cases. Le problème c'est que j'ai essayé en css avec des -webkit-animation mais je rencontre pas mal de problèmes, donc je n'aimerai pas la réponse directement comme avant car je veux cherché par moi même mais plutôt des indices des pistes comme le langage a utiliser,et quelqu'un que je peux contacter si je suis bloqué.
merci de vos réponses
Sujet clos
Aller à