Image hover effect causes layout displacement, when several images come together « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Newscast

closed

resolved

Image hover effect causes layout displacement, when several images come together

10 posts from 2 voices

Started 2 years ago by colorit
Latest reply from James Morrison
This topic is closed
This topic is resolved

Tags:

colorit
Member

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.

Posted 2 years ago #
James Morrison
Former Team Member
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.
Posted 2 years ago #
colorit
Member

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?

Posted 2 years ago #
James Morrison
Former Team Member

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.

Posted 2 years ago #
colorit
Member

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.

Posted 2 years ago #
James Morrison
Former Team Member

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.

Posted 2 years ago #
colorit
Member

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.

Posted 2 years ago #
James Morrison
Former Team Member
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.
Posted 2 years ago #
colorit
Member

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

Posted 2 years ago #
James Morrison
Former Team Member

Hi!

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

Regards,
James

Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top