Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #285

    Hi,

    I discovered a strange behaviour of the theme’s layout, when several images – in a post or in the sidebar – come together.

    When hovering over an image, a box appears – that is in the CSS, I know, and it works, if there is just 1 image at this place.

    But when several images come together in one line or in another line below, then the hover effect causes, that when you, for example, hover over the first image in the first line, the image right below in the next line “escapes” to the right.

    Normal layout, without hover over an image:

    http://i30.tinypic.com/2nsavb9.jpg

    Hover over the first image in the first line at the left, causes that the first image in second line goes to the right:

    http://i27.tinypic.com/2zxxhxw.jpg

    Same problem with images coming together in the sidebar:

    Normal without hovering over images:

    http://i32.tinypic.com/1iooip.jpg

    With hovering over the first image in first line:

    http://i29.tinypic.com/1zxny1c.jpg

    See it live here: http://tinyurl.com/39ecylm

    in the post at the left side and in the sidebar under “daily inspiration” on the right side.

    I think, it must be the hover script/code, that causes this problem, when a box appears around the image, when hovering it and therefor the image needs more place?

    … I don’t know, I wasn’t able to figure this out …

    Do you have any idea?

    Thanks.

    #30658

    There’s a problem with margin in the CSS forcing the width of the content to be greater than the content area causing it to drop down.

    If you look at your “Letzte Artikel” widget, the hover effect doesn’t cause this problem within the theme, it looks like you’re using a third party plugin / widget or custom coding.

    Have a look at changing the CSS for this:

    .thmb {
    margin-left:0;
    padding-top:10px;
    }
    .thmb li {
    float:left;
    list-style:none outside none !important;
    margin:1px;
    }
    .thmb li img {
    border:0 dashed #C0C0C0;
    padding:1px;
    width:119px;
    }

    to fix the problem.

    #30659

    Hi,

    I haven’t found this CSS with .thmb in any of NEWSCAST’s CSS.

    This problem is not a matter of plugins. What you mean, where it works, is the NEWSCAST-widget “news”. It is the only part within the theme, where it works.

    It is a matter of several images in 2 or more lines, one below each other, with each images having a link.

    This causes the NEWSCAST hovering effect with a stronger box around the images.

    This is the reason, why the images, coming in a new line below an image, are pulled to the right side.

    Where had you the CSS above?

    #30660

    The code is being added in the HTML (check the page source not the CSS file) by whichever plugin you are using, you’d have to edit the plugin to stop this being added.

    The News Article widget is built in and designed to work as it does.

    #30661

    ok, that’s a problem of the hovering box style – that is in the theme, not the plugins, that causes this distraction.

    Where is this hovering effect set in the theme, where (all) images get a stronger box when hovering over them?

    This is an effect of NEWSFCAST, it is in the news-widget, too, that images get a stronger box by hovering them.

    I think, I have to look at this place, because the CSS-styles of the plugin’s images itself have no styles for “hover”.

    Thanks.

    #30662

    To remove the hover function for the .thmb images, add this code to the end of style.css:

    .thmb img a:hover { border: none !important; }

    That’ll stop the border being applied and causing the layout bug.

    #30663

    Thanks, but I want all images, that are used in NEWSCAST to have NO hover effect (= a stronger box around it), because the .thmb is just one of many plugins, that fail with this image-hover and each has its own styles. So I have to remove the general NEWSCAST image hover.

    #30664

    So, you need to remove the :hover references in the CSS for the borders. Open up css/style1.css (or style2.css or style.css depending on which style you chose), find and delete this code:

    .box img, .entry img, .wp-caption{
    border:1px solid #E1E1E1;
    }

    .box a:hover img, .entry a:hover img, .entry-previewimage:hover{
    border:1px solid #999;
    }

    This will be slightly different if you used style2.css or style3.css.

    #30665

    Exactly that was the problem for all. Thanks a lot for your kind support and patience, James!

    #30666

    Hi!

    No worries mate, let me know if you have any other questions.

    Regards,

    James

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Image hover effect causes layout displacement, when several images come together’ is closed to new replies.