Mettre un texte changeant dans un lien rond avec image

Invité · 24/11/2014, 23h29

Bonjour,
Voila longtemps que je ne suis venue,

Alors pour comprendre ma demande, testez le résultat du code ci-dessous
http://www.fox-infographie.com/rond_reactif_alsa.htm

Mon code est le suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!DOCTYPE HTML><html ><head>
<style>
<!--
html, body {  height: 100%; }
body { background-color : #4d4d4d; font-family :Georgia, "Times New Roman", Times, serif; color :#F08136; 
font-size :28px; text-align :center; }
.mes_ronds{background-position:center top;border:1px solid #ccc;border-radius:50%;box-shadow:inset 3px 3px 4px 0 rgba(0,0,0,0.4);cursor:pointer;display:inline-block;height:250px;margin-bottom:26px;width:250px;}
.mes_ronds:hover{box-shadow:inset 0 0 0 250px rgba(0,0,0,0.3);}
div.centre2blanc { top:0px;height :auto;width :auto; max-width :900px; margin :auto; text-align :center; } 
img { border :2px;}
a.LesA {font-family :"Times New Roman", Times, serif;  font-size :24px !important;color :#eeeeee; text-decoration :none;}
a.LesA:hover { color :#eeaaaa; }
p.Center {  text-align:center;font-family:"Times New Roman", Times, serif; color :#eeeeee; font-size :28px  !important; }
-->
</style>
</head><body>
<div class="centre2blanc" ><br /><br />
<div class="mes_ronds" style="background-image:url('logos/fourneret001250.jpg');"><p class="Center">
<A class="LesA" href="index.php" ><img src='zzz/puce_vide_200_200.gif' class='limg1' /></a></p>
</div></div></body></html>

Mon problème est peut-être simple pour vous, mais je ne parvient pas a avoir en plus de l'effet actuel, un texte qui serait par exemple gris et deviendrais
blanc pur en HOVER
Mille mercis d'avance !

**Muchos** · 25/11/2014, 03h02

Perso, je n'ai pas compris le code.

Et en allant vers quelque chose comme ça ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE HTML>
<html>
<head>
<title>Mes ronds</title>
<style>
body {
  background: #333;
}
.mes_ronds {
  display: block;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 250px;
  height: 250px;
  font-size: 300%;
  line-height: 250px; /* texte aligné vert. */
  text-align: center; /* texte aligné horiz. */
  color: #ccc;
  background-image: url(http://www.fox-infographie.com/logos/fourneret001250.jpg);
}
.mes_ronds:hover {
  color: white;
}
</style>
</head>
<body>
  <a class="mes_ronds" href="#">TEST</a>
</body>
</html>

Invité · 25/11/2014, 03h42

Merci pour ta réponse, et m'avoir consacré un moment.

Bien sur en retirant l'effet sur le background et la bordure ça je sais faire l'Ami

As tu été sur mon lien ? l'effet est joli, et dans ta solution tu l'a tout simplement supprimé !
C'est donc bien ce que je veut faire, ton texte intégré à mon effet !

Nota, pourquoi tu m'a pénalisé ?? tu m'a trouvé impolie ?? je trouve cela peut accueillant, si on pose une question, bien sur le code ne sera pas parfait

ce n'est pas bien grave mais blessant.

**NoSmoking** · 25/11/2014, 19h02

Bonjour,
il te faut utiliser les transitions

un simple exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Simple test</title>
<style>
.test{
  background:#000;
  color:#FFF;
  transition:all 0.5s;
}
div:hover .test{
  background:#FFF;
  color:#000
}
</style>
</head>
<body>
  <div>
    <span class="test">Le texte du SPAN</span>
  </div>
</body>
</html>

et un tuto Les transitions en CSS3

Invité · 29/11/2014, 06h52

Bonjour Christèle

Je n'ai pas compris l'intérêt de la "puce_vide" ?

J'ai ajouté quelques effets ici : http://codepen.io/jreaux62/pen/dPYbjE

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="centre2blanc">
<div class="mes_ronds" style="background-image:url('http://www.fox-infographie.com/logos/fourneret001250.jpg');">
  <p class="Center">
    <a class="LesA" href="index.php" >
      <span>lorem ipsum</span>
    </a>
  </p>
</div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
html, body {  height: 100%; }
body { background-color : #4d4d4d; font-family :Georgia, "Times New Roman", Times, serif; color :#F08136; 
font-size :28px; text-align :center; }
 
.mes_ronds{ 
  background-position:center top;
  border:1px solid #ccc;
  border-radius:50%;
  box-shadow:inset 3px 3px 4px 0 rgba(0,0,0,0.4);
  display:inline-block;
  height:250px;
  margin-bottom:26px;
  width:250px;
  overflow:hidden;/*important*/
  transition:all 1.5s;
}
.mes_ronds:hover{
  box-shadow:inset 0 0 250px 250px rgba(0,0,0,0.4);
}
 
div.centre2blanc { 
  top:0px;
  height :auto;
  width :auto; 
  max-width :900px; 
  margin :auto; 
  text-align :center; 
} 
img { border :2px; }
a.LesA {
  font-family :"Times New Roman", Times, serif;  font-size :24px !important;
  color :#eeeeee; 
  text-decoration :none;
}
a.LesA:hover { color :#eeaaaa; }
p.Center {  
  text-align:center;
  font-family:"Times New Roman", Times, serif; 
  color :#eeeeee; 
  font-size :28px  !important; 
}
 
.mes_ronds { position:relative; }
.mes_ronds .LesA span { position:absolute; 
  top:0; bottom:0; left:0; right:0; 
  display:block; 
  line-height:250px; /* centrage vertical du texte */
  opacity:0.6;
  transition:all 1.5s;
}
.mes_ronds:hover .LesA span { 
  color:white; 
  opacity:1; 
  font-size :32px;
}

N.B. Tu devrais quand même améliorer l'indentation de ton code.
On y verrait plus clair...

Invité · 29/11/2014, 08h56

Merci c'est résolu, une perfection ce code !!
en attendant je viens d'en faire une variante ici
http://www.raphael-paris.fr/index.php

A très bientôt et mille mercis

**NoSmoking** · 29/11/2014, 11h35

Christele tu devrais quand même jeter un coup d'oeil à la validation de ta page Validation Service

Invité · 01/05/2015, 13h28

Bonjour Foxie

j'ai amélioré / simplifié le code : http://codepen.io/jreaux62/pen/dPYbjE

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="centre2blanc">
  <div class="mes_ronds" style="background-image:url('http://www.fox-infographie.com/logos/fourneret001250.jpg');">
    <p>
      <a href="index1.php">lorem ipsum</a>
    </p>
  </div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
div.centre2blanc { 
  display:inline-block;
}
 
.mes_ronds { 
  display:table;/*important*/
  overflow:hidden;/*important*/
  width:250px;
  height:250px;
  background-position:center center;
  background-size:cover; 
  border:1px solid #ccc;
  border-radius:50%;
  box-shadow:inset 3px 3px 4px 0 rgba(0,0,0,0.4);
  transition:all 1.5s;
}
 
.mes_ronds p {  
  display:table-cell;/*important*/
  vertical-align:middle;/*important*/
  text-align:center;
  padding:10px;
  font-family:"Times New Roman", Times, serif; 
}
.mes_ronds a {
  position:relative; 
  display:block; 
  font-family :"Times New Roman", Times, serif;
  font-size :100%;
  color :#eeeeee; 
  text-decoration :none;
  opacity:0.6; 
  transition:all 1.5s;
  z-index:9999;
}
 
.mes_ronds:hover{
  box-shadow:inset 0 0 250px 250px rgba(0,0,0,0.4);
}
 
.mes_ronds:hover a { 
  color:#fff; 
  opacity:1; 
  font-size :120%;
}

Quelques effets supplémentaires : http://codepen.io/jreaux62/pen/YXPRBg

Mettre un texte changeant dans un lien rond avec image [CSS 3]

CSS

Discussions similaires

Partager

Partager