web-dev-qa-db-fra.com

Texte sur l'image survolée?

J'essaie de faire apparaître une petite boîte en bas à gauche d'une image lorsque la souris la survole. Dans la boîte, il y aura un lien vers une page différente.

Ici est un peu similaire à ce que je veux, mais la case doit être plus petite et non reliée à la bordure de l'image.

J'ai tout essayé et je ne trouve pas de réponse. Et je ne veux pas utiliser les info-bulles, sans parler du fait que je n'ai aucune connaissance en javascript. Je veux vraiment que ce soit CSS.

Vous pouvez également trouver les images avec lesquelles je tente de travailler ici

cssimagetextmouseover
28
alex r

Ceci utilise le :hover pseudoélément en CSS3.

HTML: 

<div id="wrapper">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>​

CSS: 

#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

Démo ICI .

C’est plutôt un moyen d’obtenir le même résultat en utilisant jquery:

HTML: 

<div id="wrapper">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>​

CSS: 

#wrapper p {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

code jQuery: 

$('.hover').mouseover(function() {
  $('.text').css("visibility","visible");
});

$('.hover').mouseout(function() {
  $('.text').css("visibility","hidden");
});

Vous pouvez mettre le code jquery où vous voulez, dans le corps de la page HTML, puis vous devez inclure la bibliothèque jquery dans le tête comme ceci:

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

Vous pouvez voir la démo ICI .

Lorsque vous souhaitez l’utiliser sur votre site Web, il suffit de changer le <img src /> valeur et vous pouvez ajouter plusieurs images et légendes, il vous suffit de copier le format que j’ai utilisé: insérer une image avec class="hover" et p avec class="text"

43
Fabio

Voici un moyen de le faire en utilisant css

[~ # ~] html [~ # ~] 

<div class="imageWrapper">
    <img src="http://lorempixel.com/300/300/" alt="" />
    <a href="http://google.com" class="cornerLink">Link</a>
</div>​

[~ # ~] css [~ # ~] 

.imageWrapper {
    position: relative;
    width: 300px;
    height: 300px;
}
.imageWrapper img {
    display: block;
}
.imageWrapper .cornerLink {
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 2px 0px;
    color: #ffffff;
    background: #000000;
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;

}
.imageWrapper:hover .cornerLink {
    opacity: 0.8;
}

Démo

Ou si vous le voulez juste dans le coin inférieur gauche:

Démo

18
3dgoo