http://www.kriesi.at/support/topic/image-hover-effect-causes-layout-displacement-when-several-images-come-together Support Forum - Topic: Image hover effect causes layout displacement, when several images come together en-US Tue, 18 Jun 2013 04:40:52 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/image-hover-effect-causes-layout-displacement-when-several-images-come-together#post-1379 Thu, 29 Jul 2010 15:01:29 +0000 James Morrison 1379@http://www.kriesi.at/support/ <p>Hi! </p> <p> No worries mate, let me know if you have any other questions. </p> <p> Regards,<br /> James </p> http://www.kriesi.at/support/topic/image-hover-effect-causes-layout-displacement-when-several-images-come-together#post-1342 Thu, 29 Jul 2010 11:02:55 +0000 colorit 1342@http://www.kriesi.at/support/ <p>Exactly that was the problem for all. Thanks a lot for your kind support and patience, James! </p> http://www.kriesi.at/support/topic/image-hover-effect-causes-layout-displacement-when-several-images-come-together#post-1332 Thu, 29 Jul 2010 09:04:41 +0000 James Morrison 1332@http://www.kriesi.at/support/ <p>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:</p> <pre><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; }</code></pre> <p>This will be slightly different if you used style2.css or style3.css. </p> http://www.kriesi.at/support/topic/image-hover-effect-causes-layout-displacement-when-several-images-come-together#post-1268 Wed, 28 Jul 2010 19:16:28 +0000 colorit 1268@http://www.kriesi.at/support/ <p>Thanks, but I want <strong>all images, that are used in NEWSCAST</strong> to have <strong>NO</strong> hover effect (= a stronger box around it), because the <code>.thmb</code> 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. </p> http://www.kriesi.at/support/topic/image-hover-effect-causes-layout-displacement-when-several-images-come-together#post-1250 Wed, 28 Jul 2010 18:03:13 +0000 James Morrison 1250@http://www.kriesi.at/support/ <p>To remove the hover function for the .thmb images, add this code to the end of style.css:</p> <p><code>.thmb img a:hover { border: none !important; }</code></p> <p>That'll stop the border being applied and causing the layout bug. </p> http://www.kriesi.at/support/topic/image-hover-effect-causes-layout-displacement-when-several-images-come-together#post-1245 Wed, 28 Jul 2010 17:48:55 +0000 colorit 1245@http://www.kriesi.at/support/ <p>ok, that's a problem of the hovering box style - that is in the theme, not the plugins, that causes this distraction.</p> <p>Where is this hovering effect set in the theme, where (all) images get a stronger box when hovering over them?<br /> This is an effect of NEWSFCAST, it is in the news-widget, too, that images get a stronger box by hovering them.</p> <p>I think, I have to look at this place, because the CSS-styles of the plugin's images itself have no styles for "hover".</p> <p>Thanks. </p> http://www.kriesi.at/support/topic/image-hover-effect-causes-layout-displacement-when-several-images-come-together#post-1216 Wed, 28 Jul 2010 16:41:22 +0000 James Morrison 1216@http://www.kriesi.at/support/ <p>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.</p> <p>The News Article widget is built in and designed to work as it does. </p> http://www.kriesi.at/support/topic/image-hover-effect-causes-layout-displacement-when-several-images-come-together#post-1190 Wed, 28 Jul 2010 14:37:06 +0000 colorit 1190@http://www.kriesi.at/support/ <p>Hi,</p> <p>I haven't found this CSS with <code>.thmb</code> in any of NEWSCAST's CSS.</p> <p>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.</p> <p>It is a matter of several images in 2 or more lines, one below each other, with each images having a link.<br /> This causes the NEWSCAST hovering effect with a stronger box around the images.<br /> This is the reason, why the images, coming in a new line below an image, are pulled to the right side.</p> <p>Where had you the CSS above? </p> http://www.kriesi.at/support/topic/image-hover-effect-causes-layout-displacement-when-several-images-come-together#post-1189 Wed, 28 Jul 2010 14:28:48 +0000 James Morrison 1189@http://www.kriesi.at/support/ <p>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.</p> <p>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.</p> <p>Have a look at changing the CSS for this:</p> <pre><code>.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; }</code></pre> <p>to fix the problem. </p> http://www.kriesi.at/support/topic/image-hover-effect-causes-layout-displacement-when-several-images-come-together#post-1141 Wed, 28 Jul 2010 08:13:05 +0000 colorit 1141@http://www.kriesi.at/support/ <p>Hi,</p> <p>I discovered a strange behaviour of the theme's layout, when several images - in a post or in the sidebar - come together.</p> <p>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.</p> <p>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.</p> <p><strong>Normal layout, without hover over an image:</strong><br /> <a href="http://i30.tinypic.com/2nsavb9.jpg" rel="nofollow">http://i30.tinypic.com/2nsavb9.jpg</a></p> <p><strong>Hover over the first image in the first line at the left, causes that the first image in second line goes to the right:</strong><br /> <a href="http://i27.tinypic.com/2zxxhxw.jpg" rel="nofollow">http://i27.tinypic.com/2zxxhxw.jpg</a></p> <p>Same problem with images coming together in the sidebar:</p> <p>Normal without hovering over images:<br /> <a href="http://i32.tinypic.com/1iooip.jpg" rel="nofollow">http://i32.tinypic.com/1iooip.jpg</a></p> <p>With hovering over the first image in first line:<br /> <a href="http://i29.tinypic.com/1zxny1c.jpg" rel="nofollow">http://i29.tinypic.com/1zxny1c.jpg</a></p> <p><strong>See it live here: <a href="http://tinyurl.com/39ecylm" rel="nofollow">http://tinyurl.com/39ecylm</a></strong><br /> in the post at the left side and in the sidebar under "daily inspiration" on the right side.</p> <p>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?</p> <p> ... I don't know, I wasn't able to figure this out ...<br /> Do you have any idea?<br /> Thanks. </p>