-
Posts
-
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.
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
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?
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
Thank you.
Images and text still jump though. Do you have a solution for that?
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
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….
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.
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
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.
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.
- The topic ‘Images and Text jumps when moused over’ is closed to new replies.