Tagged: , , ,

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


    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:


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


    Same problem with images coming together in the sidebar:

    Normal without hovering over images:


    With hovering over the first image in first line:


    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?



    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 {
    .thmb li {
    list-style:none outside none !important;
    .thmb li img {
    border:0 dashed #C0C0C0;

    to fix the problem.



    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?


    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.


    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”.



    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.


    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.


    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.


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



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



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.