Comment afficher du texte en survolant une image avec sa souris
- Accueil
- Forum
- Programmation
- HTML / CSS
- Comment afficher du texte en survolant une image avec sa souris
VictorP Le 25 juillet 2017 à 15:33 (Édité le 25 janvier 2019 à 17:53)
Je m'appelle Victor j'ai 16 ans et je suis un débutant en programmation :)
Je viens vous demander de l'aide car dans le petit site que je me suis fais j'ai mis une galerie d'images mais il n'y a pas de texte pour présenter les images alors je voulais savoir si il était possible d'ajouter du texte sur l'image en survolant avec la souris.
Par contre pour pouvoir lire le texte écrit en blanc il faudrait mettre un fond foncé derrière le texte et donc masquer l'image le temps qu'on garde la souris dessus
J'avais trouvé ce code qui permettait de foncer l'image quand on passais la souris dessus :
ul li a {
display:block;
float:left;
width:135px;
line-height:60px; /*hauteur de l'image de fond*/
background-color: #800000 repeat-x;
color:#DCDCDC;
text-decoration:none;
text-align:center;
transition: all .6s linear;
}
ul li a:hover {
background:#800000 repeat-x;
color:white;
}
Je ne sais pas si vous avez compris ma question mais en tout cas merci d'avance :D TheOldNoob Le 26 juillet 2017 à 14:11 (Édité le 1 janvier 1970 à 01:00)
Voici ce que tu cherche, c'est pas bien compliquer a faire.
https://codepen.io/HALgraphics/pen/rVQZrM
VictorP Le 26 juillet 2017 à 14:33 (Édité le 1 janvier 1970 à 01:00)
Je vais essayer d'inclure tout ça dans mon code mais j'y comprends pas grand chose ;D
VictorP Le 26 juillet 2017 à 17:13 (Édité le 1 janvier 1970 à 01:00)
J'ai vu sur un site qui parlait de responsive qu'il fallait faire des divisions de pixels pour arriver à un résultat en pourcentage.
Je me suis peu être mal exprimé alors je vais mettre le lien que j'ai trouvé ;D
http://viseo.developpez.com/tutoriels/css/responsive-design/#LVI
Au début dans le .layout-content il y a la taille en pixels et après dans la deuxième étape il a fais un calcul pour avoir un résultat en pixel mais je comprends pas comment il sait quels chiffres prendre.😫
Merci d'avance :)
TheOldNoob Le 27 juillet 2017 à 08:03 (Édité le 1 janvier 1970 à 01:00)
N'oublie pas non plus de mettre :
img { width : 100%; }
dans ton reset css VictorP Le 27 juillet 2017 à 13:39 (Édité le 1 janvier 1970 à 01:00)
TheOldNoob Le 27 juillet 2017 à 14:04 (Édité le 1 janvier 1970 à 01:00)
si elles font le meme format, c'est que tu a mal calculé le pourcentage.
A prendre en compte les margin et padding qui se gere avec le box-sizing.
Pour exemple, si tu veux mettre :
2 images cote a cote alors tes images devrons faire 50% de l'élement parent
3 images cote à cote 33% de l'élément parent
4 images 25%
5 images 20%
etc....
Prendre en compte l'écartement entre 2 images qui du coup vont te faire changer les valeurs que j'ai donné au dessus.
par exemple pour 4 images cote a cote avec un écartement entre chaque
100 % de la largeur diviser par 4 = 25%
mais a ses 25% il faut retirer l'écartement. Si tu met 1% d'écartement comme tu a 3 écartement, tu peu retiré 1% soit 4 x 24%.
Voilà, c'est a vu de nez. L'idéal pour faire du responsive facile c'est d'utilisé un framework comme bootstrap, Kncass ou materialize
VictorP Le 27 juillet 2017 à 14:27 (Édité le 1 janvier 1970 à 01:00)
TheOldNoob Le 27 juillet 2017 à 15:36 (Édité le 1 janvier 1970 à 01:00)
VictorP Le 28 juillet 2017 à 10:14 (Édité le 1 janvier 1970 à 01:00)
VictorP Le 28 juillet 2017 à 12:41 (Édité le 28 juillet 2017 à 15:10)
<!DOCTYPE html PUBLIC >
<html lang="fr">
<head>
<meta name="description" content=""/>
<meta name="keywords" content="" />
<title>Wooden-Maker</title>
<link rel="icon" href="Images/Logo.png" >
<link rel="stylesheet" href="style.css"/>
<body id="welcome_index" class="default footer-main">
<link rel="stylesheet" type="text/css" />
<!-- MENU -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-93338637-1', 'auto');
ga('send', 'pageview');
</script>
<script language="javascript">
function displayDivInfo(text){
if(text){
//Détection du navigateur
is_ie = (navigator.userAgent.toLowerCase().indexOf("msie") != -1) && (navigator.userAgent.toLowerCase().indexOf("opera") == -1);
//Création d'une div provisoire
var divInfo = document.createElement('div');
divInfo.style.position = 'absolute';
document.onmousemove = function(e){
x = (!is_ie ? e.pageX-window.pageXOffset : event.x+document.body.scrollLeft);
y = (!is_ie ? e.pageY-window.pageYOffset : event.y+document.body.scrollTop);
divInfo.style.left = x+15+'px';
divInfo.style.top = y+15+'px';
}
divInfo.id = 'divInfo';
divInfo.innerHTML = text;
document.body.appendChild(divInfo);
}
else{
document.onmousemove = '';
document.body.removeChild(document.getElementById('divInfo'));
}
}
</script>
<!-- HEADER BG -->
<div id="blocpage">
<div id="main-content">
<div class="pull-left full-width">
<div id="header-bg" class="header-img as-window">
<div class="item">
<div class="Fondphotos">
<div id="Créations">
<img src="Images/Fondphotos.jpg" width="100%" height="1100" />
</div>
</div>
</div>
<div class="Logo">
<img src="Images/Logo.png" />
</div>
</div>
<div class="Titre">
<img src="Images/Titre.png" />
</div>
<div class="Fondcontact">
<img src="Images/Fondcontact.jpg" width="100%" height="600" />
</div>
<div class="Basdepage">
<img src="Images/Basdepage.jpg" width="100%" height="100" />
</div>
<!--ALBUM-->
<div class="Album" >
<div class="buttons">
<div class="Image1" >
<div class="butFrame">
<img src="Images/Oeuvre 3.png" >
<div class="butText">
<p>Cette oeuvre a été réalisé avec du sipo pour le disque, du pin pour les éléments assemblés sur la face recto et verso, le support est en sipo peint avec de la peinture à bombe rouge ainsi qu'en or chromé. L'élément central est de la résine acrylique entouré de cyprès.</p>
</div>
</div>
</div>
<div class="Image2">
<div class="butFrame" >
<img src="Images/Oeuvre 2.png" >
<div class="butText">
<p>..........</p>
</div>
</div>
</div>
<div class="Image3">
<div class="butFrame">
<img src="Images/Oeuvre 1.png" >
<div class="butText">
<p>..........</p>
</div>
</div>
</div>
<div class="Image4">
<div class="butFrame">
<img src="Images/Logo youtube.png" >
<div class="butText">
<p>..........</p>
</div>
</div>
</div>
<div class="Image5">
<div class="butFrame">
<img src="Images/Saladier.png" >
<div class="butText">
<p>..........</p>
</div>
</div>
</div>
<div class="Image6">
<div class="butFrame">
<img src="Images/Urne.png" >
<div class="butText">
<p>..........</p>
</div>
</div>
</div>
<div class="Image7">
<div class="butFrame">
<img src="Images/Collier.png" >
<div class="butText">
<p>..........</p>
</div>
</div>
</div>
<div class="Image8">
<div class="butFrame">
<img src="Images/Couteau.png" >
<div class="butText">
<p>..........</p>
</div>
</div>
</div>
<div class="Image9">
<div class="butFrame">
<img src="Images/Bouteille.png" >
<div class="butText">
<p>Ce support à bouteille est en cyprès et il à été coupé à 45° pour que la bouteille puisse tenir en équilibre.</p>
</div>
</div>
</div>
<div class="Image10">
<div class="butFrame">
<img src="Images/Pot.png" >
<div class="butText">
<p>Ce pot à crayon est constitué de 12 segments de sipo et de chêne qui sont coupés à 15° puis empilés les uns sur les autres.</p>
</div>
</div>
</div>
<div class="Image11">
<div class="butFrame">
<img src="Images/Rabot.png" >
<div class="butText">
<p>Ce rabot est un assemblage de sipo et de movingui</p>
</div>
</div>
</div>
<div class="Image12">
<div class="butFrame">
<img src="Images/Sapin.png" >
<div class="butText">
<p>Cette création est un sapin de noël constitué de nombreuses branches peintes en couleur or chromé.
<br>Elles sont assemblées par une tige filetée ce qui permet de pivoter chaques branches.</br>
</p>
</div>
</div>
</div>
</div>
</div>
<!--//ALBUM-->
<!--FORMULAIRE-->
<p style="text-align:center;" class="Creationstitre">
<span class="color_11">
Créations
</span>
</p>
<div class="Barre1">
</div>
<p style="text-align:center;" class="Presentationtitre">
<span class="color_11">
Présentation
</span>
</p>
<div class="Barre2">
<div id="Présentation">
</div>
</div>
<p style="text-align:center;" class="Paragraphe">
<span class="color_11">
Bonjour ! Je me présente : Victor Peuziat j'ai 16 ans et je suis depuis de nombreuses années autodidacte dans le domaine du travail du bois de manière générale et en particulier du tournage sur bois depuis mes 14 ans.
<br>
<br>Pour me contacter veuillez envoyer un mail à cette adresse :<b> vic.peuziat@gmail.com</b> </br>
</span>
</p>
<form method="post" >
<div class="Formulaire">
</div>
<fieldset id="coordonnees">
<div class="Contacter">
</div>
<p style="text-align:center;" class="Creepar">
<span class="color_11">© 2017 Victor Peuziat<br>
<a href="http://wooden-maker.esy.es/Mentionlegales.html">Mentions légales
</font>
</span>
</p>
</fieldset>
</form>
<!--//FORMULAIRE-->
<nav class="navbar navbar-fixed-top">
<div class="navbar-container">
<div class="navbar-inner">
<!-- //HEADER BG -->
<!-- MENU -->
<nav class="navbar navbar-fixed-top">
<div class="navbar-container">
<div class="navbar-inner">
<div class="nav-collapse collapse">
<ul class="nav nav-list">
<li class="nav-item-1">
<a class="Accueil" href="http://wooden-maker.esy.es/" > ACCUEIL</a>
</li>
<li class="nav-item-2">
<a class="Creations" href="#Créations" >CREATIONS</a>
</li>
<li class="nav-item-3">
<a class="Presentation" href="#Présentation" >PRESENTATION</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
<!-- //MENU -->
</head>
<body>
<body background="Images/Background.jpg"/>
</body>
</html>
html {
background: #ddd;
}
img {
width: 100% ;
max-width: 100%;
min-width: 100px;
min-height: 100px;
}
body {
max-width: 1900px;
min-width: 320px;
width: 100%;
margin:0;
}
html, body {
max-width: 100%;
background-attachment: fixed;
height: 2600px;
margin: 0 auto;
}
body {font-family: 'Century Gothic'; max-width: 1400px; }
.buttons {display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;}
/* PASTE BELOW IN CSS */
.buttons * {
transition: all .6s ease;
}
.buttons {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.butFrame {
width: 100%;
position: relative;
cursor: pointer;
margin-bottom: 10px;
overflow: hidden;
font-size: 1em;
}
.butFrame img {
width: 100%;
display: block;
vertical-align: bottom;
}
.butFrame .butHeading {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 0;
display: block;
background: rgba(0, 0, 0, 0.5);
margin: 0;
font-size: 1.2em;
color: #fff;
text-align: center;
text-transform: uppercase;
font-weight: 400;
}
.butFrame .butText {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
opacity: 0;
background: rgba(0, 0, 0, 0.5);
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.butFrame .butText p {
width: 80%;
padding: 0px 0;
color: #fff;
font-weight: 400;
font-size: 0.9em;
line-height: 1.6em;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
/* HOVER STYLES */
.butFrame:hover .butHeading {
bottom: -52px;
}
.butFrame:hover .butText {
opacity: 1;
}
.butFrame:hover .butText p {
padding: 25px 0;
}
/* MEDIA QUERIES */
@media all and (max-width: 950px) and (min-width: 701px){
.butFrame .butText p {
font-size: 0.85em;
}
}
@media all and (max-width: 700px) and (min-width: 0px){
.butFrame {
display:block;
width:100%;
}
}
#blocpage {
width: 100%;
height: 100%;
}
*{
margin: 0;
font-family: "Century Gothic", Sans Serif ;
}
.Logo{
position: absolute;
top: 160px;
left: 39% ;
right: 0px ;
width: 20% ;
height: 20% ;
}
.Titre{
position: absolute;
top: 290px;
left: 32%;
right: 0px ;
width: 34% ;
}
.Fondphotos{
position: absolute;
top: 720px;
width: 100% ;
max-width: 1400px;
}
.Fondcontact{
position: absolute;
top: 1900px;
left: 0px;
right: 0px;
width: ;
height: ;
}
.Basdepage{
position: absolute;
top: 2540px;
left:0px;
right: 0px;
width: ;
height: ;
}
/* Album */
.Image1{
position: absolute;
top: 900px;
width: 25%;
height: 25%;
}
.Image2{
position: absolute;
top: 900px;
left:25% ;
width: 25%;
height: 25%;
}
.Image3{
position: absolute;
top: 900px;
left: 50% ;
width: 25%;
height: 25%;
}
.Image4{
position: absolute;
top: 900px;
left: 75% ;
width: 25%;
height: 25%;
}
.Image5{
position: absolute;
top: 1170px;
left:0%;
width: 25%;
}
.Image6{
position: absolute;
top: 1170px;
left:25% ;
width: 25%;
}
.Image7{
position: absolute;
top: 1170px;
left: 50% ;
width: 25%;
}
.Image8{
position: absolute;
top: 1170px;
left:75% ;
width: 25%;
}
.Image9{
position: absolute;
top: 1440px;
left:0% ;
width: 25%;
}
.Image10{
position: absolute;
top: 1440px;
left:25% ;
width: 25%;
}
.Image11{
position: absolute;
top: 1440px;
left:50% ;
width: 25%;
}
.Image12{
position: absolute;
top: 1440px;
left:75% ;
width: 25%;
}
.Creationstitre{
font-size: 2em ;
position: absolute;
top: 760px ;
left:42%;
right: 58%;
width: 200;
min-width: 100px;
min-height: 50px;
}
.Presentationtitre{
font-size: 2em ;
position: absolute;
top: 1950px ;
left:42%;
right: 60%;
width: 200;
}
.Paragraphe{
font-size: 1.35em ;
position: absolute;
top: 2050px ;
left:30%;
right: ;
width: 500;
color: 3f3f3f ;
text-align: center;
}
.Creepar{
font-size: 1em;
position: absolute;
top: 585px;
left: px ;
right: px;
color: white;
width: 300;
}
.Barre1{
position: absolute;
top: 820px;
left: 48% ;
right: ;
color: black;
width: 50;
border: 1px solid black;
}
.Barre2{
position: absolute;
top: 2005px;
left: 48%;
right: px;
color: black;
width: 50;
border: 1px solid black;
}
form/*Formulaire*/{
position: absolute;
top: 1980px;
height: 450px;
right: 0px;
left: 505px;
width: 0px ;
text-align: center;
font-size: 20;
}
input, textarea{
height: 40px;
border : 2px solid grey;
font-size: 15;
}
fieldset {
margin: 0; padding: 0; border: 0;
}
ul {
padding:0;
margin:0;
list-style-type:none;
font-size: 20px;
}
ul li a {
display:block;
float:left;
width:160px;
line-height:25px; /*hauteur de l'image de fond*/
background-color: #800000 repeat-x;
color:#ffffff;
text-decoration:none;
text-align:center;
transition: all .6s linear;
position: center;
right: 60px;
}
.Accueil ,.Creations{
border-right:1px solid ;
top: 20px ;
height: 25px;
position: relative;
}
.Presentation{
top: 20px ;
height: 25px;
position: relative;
}
ul li a:hover {
background: repeat-x;
color:white;
}
a img{
float: ;
width: 50px;
text-align: center;
}
element.style {
}
.navbar {
background-color: transparent;
z-index: 1000;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 430px;
z-index: 1030;
margin-bottom: 0;
}
Il doit surement il y avoir beaucoup d'erreurs mais je suis débutant alors ;D TheOldNoob Le 29 juillet 2017 à 12:24 (Édité le 1 janvier 1970 à 01:00)
Pas mal de truc qui ne vont pas.
Déjà tu crée des classe Image de 1 a 12.
On met jamais de majuscule sur une class
Ensuite, tu met des valeurs commune. Prend une classs, colle la a toute tes images qui ont besoin de ses valeur, puis crée des ID pour les valeurs unique.
Hormis ça si tu veux que ton site prenne la totalité de la page, il faut faire un reset CSS. Car chaque navigateur a sa propre feuille de style.
Par exemple, chrome a une marge de 8px sur le body...
VictorP Le 29 juillet 2017 à 12:39 (Édité le 1 janvier 1970 à 01:00)
Par contre le reset css c'est quoi ?
TheOldNoob Le 29 juillet 2017 à 12:40 (Édité le 1 janvier 1970 à 01:00)
https://www.alsacreations.com/astuce/lire/36-reset-css.html