bonsoir.

je développe en HTML5. j'ai vu la page d’accueil d'openclassrooms et j'avoue que l'effet créer au passage de la souris sur les différents cours du body ma beaucoup plu et j'aimerais réaliser quelque chose comme ça. Ma question est de savoir si cela peut se faire en css3? si oui comment procéder?

Merci d'avance!!!

Bonjour

Je pense que tu dois utiliser javascript

va voir cet exemple

http://www.w3schools.com/jsref/event_onmouseover.asp

Salut,

Pas besoin de JS, fais simplement une recherche sur :hover en CSS

Bonjour, comme dis warpShadow, l'utilisation du pseudo élément :hover te fera l'effet voulu.
Un petit exemple pour t'aider :  

#maDiv {
    background-color: red;
}

#maDiv:hover {
    background-color: blue;
}

Ta div a un fond de couleur bleue.
Au passage de la souris, le fond deviendra rouge.

Bonne continuation 

/* De base */
#idDiv {
background-color:grey;
}

/* Au survol */
#idDiv:hover {
background-color:black;
cursor:pointer;
}

Merci pour vos réponses. J'ai beaucoup apprécier, mais j'aimerais mettre par exemple des informations sur l'image au passage de la souris comme sur la page d'acceuil

Salut,

quelle page d'accueil ?

si j'ai bien compris ça se fait soit avec l'attribut alt des images, soit avec une infobulle.

Explique mieux ton problème ?

Si tu as envie d'une infobulle en HTML, tu peux utiliser l'attribue title.

<img src="mon_image.png" alt="Ceci est une image." title="Vous avez survolé l'image !" />

Cependant, cette technique reste très rudimentaire et peu "customisable", si je puis dire. La meilleure solution serait de créer tes infobulles avec du JavaScript. Afin de te faciliter la vie, tu peux regarder des librairies comme jQuery. Elles proposent des fonctions toutes faites qui vont probablement te faciliter la vie.

-
Edité par Nexsus 21 février 2014 à 13:24:08

L'attribut title n'est pas par défaut un attribut de img mais on peut l'utiliser.

Si le alt ne suffit pas effectivement on peut faire une infobulle.

Et l'infobulle se fait également  en CSS.

http://fr.openclassrooms.com/informatique/cours/modifier-l-apparence-d-une-infobulle

-
Edité par Frogweb 21 février 2014 à 13:43:59

Salut, voilà un petit code qui peut-être utile

<div class="box">
 <p id="text-box">Ton texte !!</p>
</div>

.box {
			 width: 300px;
			 height: 300px;
			 background-image: url('http://www.espritdesiles.com/459-1475-large_default/barrette-fleur-frangipanier-rouge-blanche-jaune-6-cm.jpg'); /* .png, .jpg ... */
			 padding-top: 150px;
			}
			#text-box {
			 width: 300px;
			 height: 150px;
			 opacity: 0;
			 background-color: #f00;
			}
			.box:hover #text-box {
			 opacity: 0.5;
			}

ou une autre technique :

.box {
 width: 300px;
 height: 300px;
 overflow: hidden;
 padding-top: 300px; /* Ou plus comme tu veux */
 background-image: url('http://www.espritdesiles.com/459-1475-large_default/barrette-fleur-frangipanier-rouge-blanche-jaune-6-cm.jpg'); /* .png, .jpg ... */
}
.box:hover {
 padding-top: 0;
}

Dis moi si ça marche

-
Edité par Crea2Luxe 21 février 2014 à 15:42:49

ronamazona a écrit:

L'attribut title n'est pas par défaut un attribut de img mais on peut l'utiliser.

Si le alt ne suffit pas effectivement on peut faire une infobulle.

Et l'infobulle se fait également  en CSS.

http://fr.openclassrooms.com/informatique/cours/modifier-l-apparence-d-une-infobulle

-
Edité par ronamazona il y a une minute

Très sympa ce que tu me montre, ronamazona. Méa culpa.

J'ai écris un petit truc pour toi, MartialDeVinci :

<div id="mon_bloc">
   <p><img src="mon_image" alt="Une image" /></p>

   <div id="description">
      <div id="in_description">
         <p>Ceci est une description d'une image. Elle s'affiche en survolant le contenu.</p>
      </div>
   </div>
</div>

#mon_bloc
{
  background-color: #000;
  position: relative;
}

#mon_bloc p
{
  margin: 0;
}

#mon_bloc, #mon_bloc img, #description
{
  width: 100%;
}

#description
{
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, .4);
  opacity: 0;


  /* Effet de transition */
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  -ms-transition: opacity 1s;
}

#in_description
{
  padding: 5px;
}

#mon_bloc:hover #description
{
  opacity: 1 !important;
}

Ce code permet d'afficher une div lors du survol d'une image (ou de tout autre contenu). Le code est très simple. A noter que je n'ai utilisé que le strict minimum de la propriété transition. Voici un très bon site qui explique son utilisation : http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html.

-
Edité par Nexsus 21 février 2014 à 14:04:19

Rhooo, la jolie infobulle tout en CSS !

En fait, lorsque j'ai écris ça, je me suis rendu compte que c'était exactement l'infobulle de ShadowBlade. xDD

Shadowblade ?

c'est ce que fait jquery ?

ronamazona a écrit:

Shadowblade ?

c'est ce que fait jquery ?

Je parlais du tuto que tu viens de poster sur le topic. Mon code est assez ressemblant à celui de ShadowBlade dans le tuto sur les infobulles CSS.

Ah ok

p'tête faire une petit sieste moi...

Merci Nexsus, mon problème est maintenant résolu. Je vais juste mettre deux div ( une pour le titre de mon article et l'autre pour le contenu de mon information. Et appliquer ton style css. Pour ceux qui suivent ce sujet je posterai le code complet demain. Grand merci à tout le monde car vos commentaire m'ont un ouvert l'esprit sur plusieurs possibilités. Je crois que je mais me lancer dans le Jquery pour ma prochaine formation personnelle.

Bonjour,

Savez vous créer une animation comme sur le site de nomad (au passage de la souris, les éléments apparaissent https://www.nomadeducation.fr/

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte (et préciser un peu plus le besoin : quels éléments précisément apparaissent sous la souris sur le site donné en exemple ?)
• ne pas répondre à un déterrage et le signaler à la modération