Bonjour,

J'ai crée un texte qui apparaît au survol d'une image.

Seulement lorsque je veux y intégrer un lien vers une page de mon site, celui-ci n'est pas reconnu car l'image est en arrière plan (logique).

De ce fait, j'ai fait le lien sur le texte mais cela n'englobe pas la totalité de la vignette (toujours logique).

Est-il possible d'englober la totalité de la vignette avec un lien ou vaut-il mieux créer une deuxième image qui apparait au survol et seulement là intégrer le lien sur cette seconde image.

La 1ere solution serait vraiment bien mais je doute que cela soit possible.

Si vous avez des suggestions, n'hésitez pas

Merci par avance

Novis

Bonjour,

J'ai une solution simple, on utilise seulement une balise <a href="">

html :

<a href="page.html">Cliquez ici</a>

css :

    a {
    	display:inline-block;
    	width:200px;
    	height:200px;
    	line-height:200px;
    	text-align:center;
    	color:transparent;
    	transition:0.5s;
    	background:url(image/1.jpg) center center no-repeat;
    	background-size:cover;
    }
    a:hover {
    	color:white;
    }

Merci pour votre aide.

En fait, en regardant le script sur ma page html, je retrouve

<a href="page.html">Cliquez ici</a>

Oui en fait il faut affecter une classe générale à chaque vignette et une class pour chaque image de fond, et le tour est joué, mon exemple devient :

<a href="page01.html" class="lienCarre lienCarre01">Cliquez ici</a>
<a href="page02.html" class="lienCarre lienCarre02">Cliquez ici</a>

css:

    .lienCarre {
    	display:inline-block;
    	width:200px;
    	height:200px;
    	line-height:200px;
    	text-align:center;
    	color:transparent;
    	transition:0.5s;
    	background-size:cover;
    }
    .lienCarre:hover {
    	color:white;
    }
    
    .lienCarre01 {
    	background:url(image/1.jpg) center center no-repeat;
    }
    
    .lienCarre02 {
    	background:url(image/2.jpg) center center no-repeat;
    }

etc. pour n liens, chacun avec son image de fond

-
Edité par ChrisLebure 18 août 2017 à 17:38:00

Merci Chris pour votre réponse.

Alors j'ai plusieurs questions... Lorsque j'insère ces codes, mon effet hover est décalé vers le bas. Le "cliquez-ici" crée un décalage.

Comment cela se fait -il?

Par ailleurs, le lien ne se fait toujours pas.

Pour info, j'ai réussi à insérer un carré et donc mon code se voit modifier.

.item .caption:before {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        border: 1px solid #fff;
        content: '';


}

du coup dans mon html j'ai modifié également  et cela donne:

<a href="ma page.html" class=".caption:before01">Cliquez ici</a>

et du coup mon css est:

.item .caption:before {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        border: 1px solid #fff;
        content: '';

}


.caption:before01{
    background:url(http://adresse de mon image.jpg) center center no-repeat;

}

suis-je sur la bonne voie?

Merci

Novis

Je n'ai toujours pas réussi à intégrer le fait qu'il y ait un lien sur mon code hover...

Merci de votre aide

novis

Bonjour,

Après plusieurs essais, je bloque totalement...

Je vous envois le code de mon html:

<div class="item"><img alt="Peintures" src="http://mon adresse.com/images/n/nem/mon image.jpg" style="width: 250px; height: 250px;" title="" />
<div class="caption"><a href="">PEINTURES<span><b>contemporaines</b></span> </a><a class=".item .caption:before01" href="http://mon adresse.com/peinture.php">Cliquez ici</a>

mon code css:

</script>
<style>
body 
        {<strong>></strong>
  <link href='http://fonts.googleapis.com/css?family=raleway' rel='stylesheet' type='text/css'>
<strong>></strong>}


.item {
        width:250px;
        height:250px;   
        border:2px solid #222;  
        margin:5px 5px 5px 0;


        /* required to hide the image after resized */
        overflow:hidden;
        
        /* for child absolute position */
        position:relative;
        
        /* display div in line */
        float:left;

}

        


.item .caption {
        width:250px;
        height:250px;
        background:#000;
        color:#fff;
        font-weight:light;
        text-align:center;
        line-height:normal;

       

        /* fix it at the bottom */
        position:absolute;
        left:0;

        /* hide it by default */
        display:none;

        /* opacity setting */
        filter:alpha(opacity=80);    /* ie  */
        -moz-opacity:0.8;    /* old mozilla browser like netscape  */
        -khtml-opacity: 0.8;    /* for really really old safari */  
        opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption:before {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        border: 1px solid #fff;
        content: '';
        transition:0.5s;

}

.item .caption:before01{
    background:url(http://mon adresse.com/images/n/nem/mon image.jpg) center center no-repeat;
}



.item .caption:before p{
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.item .caption:hover caption:before,
.item .caption:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}


.item .caption a {
        padding:25px; 10px; 
        text-decoration:none;
        color:#9400D3;
        font-size:20px; 
        font-weight:normal;
        text-align:center;
        line-height:normal;
        
}


        /* add spacing and make the whole row clickable*/
        padding:5px; 5px; 20px; 5px;
        display:INLINE-BLOCK;
}

.item .caption b {
        padding:25px; 10px; 
        text-decoration:none;
        color:#9400D3;
        font-size:20px; 
        font-weight:bold;
        text-align:center;
        line-height:normal;
        
       


        /* add spacing and make the whole row clickable*/
        padding:5px; 5px; 20px; 5px;
        display:INLINE-BLOCK;
}

.item .caption p {
        padding:25px; 5px; 25px; 2px;
        margin:2;
        font-size:16px;
        font-weight:light;
        text-align:center;
        line-height:normal;
        position: relative;
        top: 40%;
         
}

.item img {
        border:0;
        
        /* allow javascript moves the img position*/
        position:absolute;
}

.clear {
        clear:both;     
}
</style>
>

Si vous voyez ce qui cloche, merci de m'expliquer... J'ai essayé pas mal de code mais cela ne fonctionne pas, le lien ne se fait pas sur l'effet hover.

En tout cas grand MERCI a qui voudra bien m'aider

Novis

Bonjour,

Est-ce que quelqu'un pourrait m'aider à avancer et comprendre ce qui ne va pas dans mon code s'il vous plait?

Je vous remercie beaucoup

novis