CODEWITHSUNDEEP
htmlhover
malicedix
malicedix

Reputation: 129

On image hover, display title/alt tag in center

I'm looking for a way so that when I hover over an image, the title or alt tag is displayed in the center of the image (fading in/out), with the image also lowered in opacity.

I've looked around quite a bit but most javascript plugins I find create a tool tip and it's not what I'm looking for.

Thanks for any suggestions.

EDIT: Forgot to mention, the images need to stay in a simple ul list, no extra divs or anything wrapping around each image. They will also use the rel attr for shadowbox or similar.

Upvotes: 3

Views: 11608

Answers (3)

Jason Gennaro
Jason Gennaro

Reputation: 34855

You could do something like this

$('ul li img').hover(
    function(){
        $(this).css('opacity','.5');
        var a = $(this).attr('alt');
        $(this).parent().append('<div class="title">' + a + '</div>');
    },
    function(){
        $(this).css('opacity','1');
        $(this).next().remove('.title');
    }
);

(Quick and dirty jQuery could definitely be improved)

CSS

ul li img{
    position:relative;
}

.title{
    position:absolute;
    z-index:1000;
    top:50%;
    bottom:50%;
    right:50%;
    left:50%;
    width:100px;
    border-radius:5px;
    background:red;
}

(CSS could also be improved... but this gives you an idea)

Example: http://jsfiddle.net/dgKne/

Upvotes: 2

KayleL
KayleL

Reputation: 2863

You could use what ile has, but instead of adding a div, you could use addClass. Just use li as the hoverable object.

$("li.picture").hover(
    function(){
        $(".selected_result").removeClass("selected_result");
        $(this).addClass("selected_result");
    }
);

I am not a pro javascript person, but this would give you an idea.

Upvotes: 0

ilija veselica
ilija veselica

Reputation: 9574

This is just a general description of how you can approach in solving this problem using jQuery:

1) Put an image in a div and give this div class (example: altHover)
2) On hover, first pick alt tag and store it in variable: var title = $("em").attr("title");
3) in the same hover function, make new div inside hovered div and print alt tag inside it:

$(".altHover").hover(
  function () {
    $(this).append($("<div class='altText'>" + title +"</div>"));
  }, 
  function () {
    $(this).find(".altText").remove();
  }
);

Upvotes: 1

Related Questions