CODEWITHSUNDEEP
jquerycssmouseoverjquery-masonry
LauraNMS
LauraNMS

Reputation: 2853

adding mouseover event to masonry

This may be an easy answer, but I'm having trouble finding much on it.

I'm using the masonry plugin to populate a page with images. The images are works of art. I'd like the artist's name to slide up from the bottom when you mouse over an image of his/her work.

Right now I'm just trying to get a mouseover event to work, but nothing is happening. Can anyone help, please?

$(document).ready(function(){


$.get("artists.json", function(data){

    json = $.parseJSON(data);

    $.each(json, function(i, data){

            $("#container").append("<div class='thumbnail small' id='" + data.id + "' index='"+i+"' style=\"background:url('" + data.imageofWork + "') no-repeat center center; background-size:cover; \" caption = '"+data.artistName+"' ></div>");



    });

});

$("#container").imagesLoaded( function(){
    setTimeout(function()
    {
        $('#container').masonry({
            itemSelector : '.thumbnail',
            gutterWidth: 0,
            isAnimated: true
        });

        $("#container").css('visibility','visible').hide().fadeIn('slow', function(){setTimeout(function(){ checkURL();},500)});

    },1200)



});


$(document).on("mouseover", ".thumbnail.small", function(){

        //console.log($(this));
        $(this).css('width:', '110%');
});

Upvotes: 1

Views: 2933

Answers (3)

superUntitled
superUntitled

Reputation: 22527

You can do this with css...

http://jsfiddle.net/3Rkdp/1/

your jquery (from your answer)

$("#container").append("<div class='thumbnail small' id='" + data.id + "' index='"+i+"' style=\"background:url('" + data.imageofWork + "') no-repeat center center; background-size:cover; \" ><div id='artistname' style='display: block; visibility: hidden;z-index:1000; font-size: 115%; font-weight: bold; padding: 10px; background-color: #000000; color: #ffffff; opacity: .5;'>"+data.artistName+"</div></div>");

css

.thumbnail { height: 200px; width:300px; overflow:hidden; position: relative; }
.thumbnail:hover .artistname { bottom: 0; }
.artistname { padding: 10px; width:100%; background-color: #000000; color: #ffffff; opacity: .5; position:absolute; bottom :-100px;  -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; }

I am using css transitions to make the transition look pretty, which does not work with ie 9 and lower, but it degrades gracefully.

Upvotes: 2

LauraNMS
LauraNMS

Reputation: 2853

I needed to nest and style the div I wanted to appear on mouseover inside the div that contains the masonry (in this case, "thumbnail small"):

$("#container").append("<div class='thumbnail small' id='" + data.id + "' index='"+i+"' style=\"background:url('" + data.imageofWork + "') no-repeat center center; background-size:cover; \" ><div id='artistname' style='display: block; visibility: hidden;z-index:1000; font-size: 115%; font-weight: bold; padding: 10px; background-color: #000000; color: #ffffff; opacity: .5;'>"+data.artistName+"</div></div>");

Upvotes: 0

chrisgonzalez
chrisgonzalez

Reputation: 4213

While "mouseover" is supposed to work, it may be advantageous to use a combination of "mouseenter" and "mouseleave" on the elements. This will also allow you to fine-tune the visual effect for in/out transitions.

Try:

$("body").on("mouseenter mouseleave", ".thumbnail.small", function(e){
    if(e.type == "mouseenter"){
        //some hover state
    }else if(e.type == "mouseleave"){
        //remove your hover state
    }
});

Good luck!

Upvotes: 0

Related Questions