Href sur une image animée

**ghazalinadou** · 12/07/2017, 15h01

Bonjour
J'ai crée une image avec cette animation , et je veux bien que lorsqu'on clic sur cette image nous remmener a un autre site. Je sais que de base on peut faire comme ça :

Code :

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

1
2
3
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
</a>

alors que avec mon code ci-dessous ça ne fonctionne pas

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
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
<!DOCTYPE html>
<html>
<head>
<style>
 
.textOverImage{ 
position:relative; 
width:300px; 
height:300px;  
margin:4px;
 background-size:100%; 
 background-position:center; 
 transition:0.5s;
 } 
 .textOverImage:hover { 
 background-size:110%;
 } 
 .textOverImage:after{ 
 position:absolute; 
 top:90%; 
 bottom:0; 
 left:0; 
 right:0; 
white-space : pre-wrap;
 overflow:hidden; 
 background-color:rgba(0,0,0,0.3); 
 color:#fff; 
 padding:0 8px;  
 content:attr(data-text); 
 transition:0.5s;
 }
 .textOverImage:hover:after{ 
 opacity: 1;
 top:0; 
 padding:8px;
 
 }
 .textOverImage:first-line{ 
 color:#fff;
 font-weight:bold;
 font-size:1.5em;
 }
</style>
</head>
<body>
 
<a href="l'adresse de site#/">
<div class="textOverImage" style ="background-image:url(url de l'image)" data-text="GMRATLANTIfdfdfdfdfg
ici le site de dfdgffdgdfg"   ></a>
  </div>
 
</div>
 
</body>
</html>

Est ce quelqu'un peut m'aider
merci

**NoSmoking** · 12/07/2017, 18h49

Bonjour,
tu indiques Cette discussion est résolue. est ce le cas ?

Quoiqu'il arrive ton code est mal construit, mauvaise imbrication des balises, et les navigateurs vont « traduire au mieux » ce que tu leur donne comme code.

Le résultat sera, à quelque chose prêt le suivant :

Code :

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

1
2
3
4
<a href="l'adresse de site#/"></a>      <!-- lien vide -->
<div class="textOverImage" style="background-image:url(url de l'image)" data-text="GMRATLANTIfdfdfdfdfg ici le site de dfdgffdgdfg">
  <a href="l'adresse de site#/"></a>    <!-- lien vide -->
</div>

et là pas de doute ton image n'est plus dans le lien.

Href sur une image animée

HTML

Discussions similaires

Partager

Partager