Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #23056

    A few concerns to address:

    My homepage has three logo images under the banner that jump downwards when you hover over them. The text spacing also jumps a little bit further away from the logos too. Is there a way to prevent them moving? Since I’m using a dark background, can I eliminate the ‘white box’ that shows when hovering over these logos? The circle is fine, but the box doesn’t work here.

    http://dure.ballmedia.com/

    #118382

    Hi,

    Might as well remove the circle because it is nested inside the box. You can add this on your custom.css

    .image-overlay.overlay-type-extern {
    display: none !important;
    }

    Regards,

    Ismael

    #118383

    That removed the white box, however, the image and text still ‘jump’ down when moused over in Firefox. In Safari, the logo moves slightly, but the text still jumps down.

    Is there a way to remedy this?

    I liked the ‘circle’ when moused over. Acted as a prompt. Is there a way to get that back without the white box?

    #118384

    Hi,

    Please use this instead. It will render a transparent box and leave the circle behind. :)

    .image-overlay.overlay-type-extern {
    background: transparent;
    }

    Regards,

    Ismael

    #118385

    Thank you.

    Images and text still jump though. Do you have a solution for that?

    http://dure.ballmedia.com/

    #118386

    Hi.

    Yeah, noticed it. I’m not sure if this will work. Add this on your custom.css

    post-entry-11 .flex_column.av_one_third .avia_textblock p {
    margin: 0.85em 0 !important;
    }

    .post-entry-11 .flex_column.av_one_third  {
    min-height: 203px !important;
    }

    How did you add them anyway?

    Regards,

    Ismael

    #118387

    My images jump too. I added them through the Add Media when editing in display mode. I am not using columns, so how do I stop the jumping? It does it in Chrome, IE and Firefox….

    #118388

    Open up the /js/avia.js file in your enfold folder, find lines 245-287 that look like:

    elements.on('mouseenter', function(e)
    {
    var link = $(this),
    current = link.find('img:first'),
    url = link.attr('href'),
    span_class = "overlay-type-video",
    opa = 0.7;

    overlay = link.find('.image-overlay');

    if(!overlay.length)
    {
    if(current.outerHeight() > 100)
    {
    if(link.height() == 0) { link.addClass(current.get(0).className); current.get(0).className = ""; }
    if(!link.css('position') || link.css('position') == 'static') { link.css({position:'relative', overflow:'hidden'}); }
    if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline-block'}); }
    if( url.match(/(jpg|gif|jpeg|png|tif)/) ) span_class = "overlay-type-image";
    if(!url.match(/(jpg|gif|jpeg|png|.tif|.mov|.swf|vimeo.com|youtube.com)/) ) span_class = "overlay-type-extern";

    overlay = $("<span class='image-overlay "+span_class+"' style='opacity: 0;'><span class='image-overlay-inside'></span></span>").appendTo(link);
    }
    }

    if(current.outerHeight() > 100)
    {
    overlay.css({left:current.position().left + parseInt(current.css("margin-left"),10), top:current.position().top + parseInt(current.css("margin-top"),10)})
    .css({display:'block','height':current.outerHeight(),'width':current.outerWidth()}).stop().animate({opacity:opa}, 400);
    }
    else
    {
    overlay.css({display:"none"});
    }

    }).on('mouseleave', elements, function(){

    if(overlay.length)
    {
    overlay.stop().animate({opacity:0}, 400);
    }
    });

    and replace the entire block above with the block below

    elements.each(function(e)
    {
    var link = $(this),
    current = link.find('img:first'),
    url = link.attr('href'),
    span_class = "overlay-type-video";

    overlay = link.find('.image-overlay');

    if(!overlay.length)
    {
    if(link.height() == 0) { link.addClass(current.get(0).className); current.get(0).className = ""; }
    if(!link.css('position') || link.css('position') == 'static') { link.css({position:'relative', overflow:'hidden'}); }
    if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline-block'}); }
    if( url.match(/(jpg|gif|jpeg|png|tif)/) ) span_class = "overlay-type-image";
    if(!url.match(/(jpg|gif|jpeg|png|.tif|.mov|.swf|vimeo.com|youtube.com)/) ) span_class = "overlay-type-extern";

    overlay = $("<span class='image-overlay "+span_class+"' style='opacity: 0;'><span class='image-overlay-inside'></span></span>").appendTo(link);
    }
    });

    elements.on('mouseenter', function(e)
    {
    var link = $(this),
    current = link.find('img:first'),
    opa = 0.7;

    overlay = link.find('.image-overlay');

    if(current.outerHeight() > 100)
    {
    overlay.css({left:current.position().left + parseInt(current.css("margin-left"),10), top:current.position().top + parseInt(current.css("margin-top"),10)})
    .css({display:'block','height':current.outerHeight(),'width':current.outerWidth()}).stop().animate({opacity:opa}, 400);
    }
    else
    {
    overlay.css({display:"none"});
    }

    }).on('mouseleave', elements, function(){

    if(overlay.length)
    {
    overlay.stop().animate({opacity:0}, 400);
    }
    });

    I’ll ask Kriesi to implement this fix in the next version.

    #118389

    I think this is the same/similar problem.

    – Firefox only: An image uploaded via Advanced Layout Editor goes from right to left after clicked or hoovered:

    Screenshot: http://demo.globalads24.com/wp-content/uploads/2013/05/Picture26adj.jpg

    Live site: http://babyblueshelp.com

    Can we use the same code or wait for the updated version?

    thx

    jasmine

    #118390

    Same issue as you Jasmine: https://kriesi.at/support/topic/problem-when-hover-on-image-alignement-with-firefox-and-opera-mac

    Also wondering if this is the fix. My issue only occurred in FF and not Chrome.

    #118391

    No, that’s another issue imo. You can try it but it seems like the jumping image issue is related to the display attribute (display:inline vs display:block-inline). please do not use this thread for your questions – I don’t want to mix things up.

    #118392

    No problem Peter will post a new topic.

    thx

    jasmine

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Images and Text jumps when moused over’ is closed to new replies.