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!!!
Seuls ceux qui ne cherchent pas ne se trompent pas...
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
Seuls ceux qui ne cherchent pas ne se trompent pas...
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
« Je ne suppose que par les faits ; j'affirme par les actes... »
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>
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
« Je ne suppose que par les faits ; j'affirme par les actes... »
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.
Seuls ceux qui ne cherchent pas ne se trompent pas...
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
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
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Seuls ceux qui ne cherchent pas ne se trompent pas...
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Seuls ceux qui ne cherchent pas ne se trompent pas...
Développeur WEB FullStack - Lyon
Seuls ceux qui ne cherchent pas ne se trompent pas...
Pas d'aide concernant le code par MP, le forum est là pour ça :)