Image hover border css difficulties (shifting)

• 

  almostartist · Member · Jan 30, 2012 at 4:41 pm

  • Copy link
  • Add topic to favorites

  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
  

  .wp-caption {
  background:#EEEEEE;
  max-width:100%;
  padding:9px;
  }

  .wp-caption img {
  display:block;
  max-width:100%;
  border:none;
  margin:auto;
  }

  .wp-caption a:focus img,.wp-caption a:active img,.wp-caption a:hover img {
  background:#FFFFFF;
  border:1px solid #DDDDDD;
  padding:6px;
  }

  thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 30, 2012 at 6:47 pm

  • Copy link

  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 · Member · Jan 30, 2012 at 8:06 pm

  • Copy link

  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 · Member · Jan 30, 2012 at 8:14 pm

  • Copy link

  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 · Member · Jan 30, 2012 at 8:26 pm

  • Copy link

  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