WordPress.com Forums » Topic: Image hover border css difficulties (shifting) http://en.forums.wordpress.com/topic/image-hover-border-css-difficulties-shifting WordPress.com Forums » Topic: Image hover border css difficulties (shifting) en Thu, 23 May 2013 11:20:53 +0000 http://bbpress.org/?v=1.1-alpha-2539 almostartist on "Image hover border css difficulties (shifting)" http://en.forums.wordpress.com/topic/image-hover-border-css-difficulties-shifting#post-805426 Mon, 30 Jan 2012 20:26:01 +0000 almostartist 805426@http://en.forums.wordpress.com/ Thanks!

oh sorry its added now - just forgot to click save

looks a lot better now i cant tell if its off by a pixel or 2 or if my eyes are playing tricks on me

]]> thesacredpath on "Image hover border css difficulties (shifting)" http://en.forums.wordpress.com/topic/image-hover-border-css-difficulties-shifting#post-805414 Mon, 30 Jan 2012 20:14:13 +0000 thesacredpath 805414@http://en.forums.wordpress.com/ Since you have not added that to the CSS yet, this may or may not work since I don't know if the other bit is also contributing to the issue.

In .wp-caption img change the "max-width: to 96%

]]> almostartist on "Image hover border css difficulties (shifting)" http://en.forums.wordpress.com/topic/image-hover-border-css-difficulties-shifting#post-805407 Mon, 30 Jan 2012 20:06:52 +0000 almostartist 805407@http://en.forums.wordpress.com/ thanks thesacredpath!

Im not sure I understand what the problem was and how that fixed it though?

I just also noticed though for some reason the img does seem to be centered in the grey border - its further to the right edge?

not sure how that is from what i can see margins are all set to auto

]]> thesacredpath on "Image hover border css difficulties (shifting)" http://en.forums.wordpress.com/topic/image-hover-border-css-difficulties-shifting#post-805316 Mon, 30 Jan 2012 18:47:32 +0000 thesacredpath 805316@http://en.forums.wordpress.com/ Add this to your CSS and see if it does not fix the issue.

img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
border: 1px solid #eee;
padding: 6px;
}
]]> almostartist on "Image hover border css difficulties (shifting)" http://en.forums.wordpress.com/topic/image-hover-border-css-difficulties-shifting#post-805218 Mon, 30 Jan 2012 16:41:21 +0000 almostartist 805218@http://en.forums.wordpress.com/ almostartist.com

I was trying to get my images to have a nice border and hover border like this site
http://ldfieldjournal.wordpress.com/

I checked out the CSS and added what I thought would work, it kinda did but on my site now when you hover there is a shift of images and text on the page

i get confused with the block/inline layout issues, possibly this has something to do with that?

this is what I added
</p> <p>.wp-caption {<br /> background:#EEEEEE;<br /> max-width:100%;<br /> padding:9px;<br /> }</p> <p>.wp-caption img {<br /> display:block;<br /> max-width:100%;<br /> border:none;<br /> margin:auto;<br /> }</p> <p>.wp-caption a:focus img,.wp-caption a:active img,.wp-caption a:hover img {<br /> background:#FFFFFF;<br /> border:1px solid #DDDDDD;<br /> padding:6px;<br /> }<br />

thanks!

]]>