web-dev-qa-db-fra.com

Comment afficher du texte sur une image estompée en survol à l'aide de jquery

J'ai un picturelink qui atténue l'opacité en vol stationnaire. Ce dont j'ai besoin, c'est que le texte soit affiché dessus. Voici un exemple de ce que je veux: http://kspla.tumblr.com/ Mon code ci-dessous atténue l'opacité à 40%, mais je ne sais pas comment obtenir texte à afficher dessus.

<script type="text/javascript">

$(document).ready(function() {
    $('#wb_Image2, #wb_Image3 a img').animate({
        opacity:1

    });

    $('#wb_Image2, #wb_Image3 a img').hover(function() {
        $(this).stop().animate({opacity:.4},200);

    }, function() {
        $(this).stop().animate({opacity:1},500)

    });


});

Merci d'avance.

javascriptjqueryhtmlcss
8
Dave

Il est bon de se rappeler que si vous gérez l'apparence des choses, il est probable que cela se fasse en CSS (ce qui vous facilitera la vie à long terme).

J'ai simulé un exemple ici: http://jsfiddle.net/HAcE2/

Vous devez fondamentalement créer une boîte qui apparaît lorsque vous survolez. En utilisant position:absolute, vous pouvez obtenir la boîte de dialogue par-dessus et en utilisant CSS, nous pouvons le faire apparaître lorsque nous la survolons.

17
rob_mccann

Définissez la text dans une étendue ou un div et positionnez-la absolutely correspondant au conteneur qui est relativement positionné.

Puis hide ou show le texte correspondant

$(document).ready(function () {
    $('#wb_Image3 a img').hover(function () {
        $(this).stop().animate({
            opacity: .4
        }, 200);
        $('.text').removeClass('hide');
    }, function () {
        $(this).stop().animate({
            opacity: 1
        }, 500);
        $('.text').addClass('hide');
    });
});

Vérifiez Fiddle

4
Sushanth --

Vous pouvez toujours ajouter une div contenant le texte souhaité à côté de l'image et définir son opacité sur 0; ensuite, lorsque vous passez la souris sur l'image, réduisez l'opacité de l'image et augmentez son opacité. 

0
Dylan N

En fait, on dirait qu’ils se fondent dans une div avec du texte blanc et un arrière-plan opaque.

Ce que vous devez faire est d'avoir un div avec l'image et un texte

<div>
   <img src="..." style="position: relative; z-index: 100;" />
   <div style="margin: 0 auto; align: center; height: 100%; width: 100%; position: relative; z-index: 101; opacity: 0; >Number</div>
</div>

Ce balisage permet de s'assurer que la div du texte chevauche la div de l'image. Au lieu de fondre l'image et de fondre dans le texte. Fondu dans le texte.

L’autre partie de cette solution consiste à s’assurer que le texte est centré verticalement. Et en ajoutant un arrière-plan opaque à 50%, vous pouvez utiliser css3 avec une couleur d’arrière-plan rgba ou ajouter un arrière-plan png et le répéter pour la div.

0
Smeegs

Vous pouvez placer votre texte dans un div et utiliser le position: absolute pour le placer au même endroit que votre image, ainsi que display: none pour le rendre invisible. Ensuite, dans JQuery, définissez votre code pour atténuer l'opacité et rendre cette div visible à l'aide de $('#nameofthediv').show(); MAIS assurez-vous de lui affecter un "indice z" supérieur à celui de l'image. La propriété z-index est utile par exemple lorsque vous avez 2 divs qui se chevauchent et que vous décidez lequel d'entre eux sera au-dessus. L'élément avec l'indice z le plus élevé est l'élément visible. Si vous ne le faites pas, l'image sera au-dessus du texte, vous ne pourrez donc pas voir le texte.

0
user2435860

Cela devrait vous aider à démarrer: http://jsfiddle.net/SBpzX/2/

$(document).ready(function() {
   $('.text').hide();
    $('img').animate({
       opacity:1

});

$('img').hover(function() {
    $(this).stop().animate({opacity:.4},200);
    $('.text').fadeIn();

}, function() {
    $(this).stop().animate({opacity:1},500)
    $('.text').fadeOut();
});

});

0
Trey Copeland