Need help? Check out our Support site, then

Image hover border css difficulties (shifting)


    I was trying to get my images to have a nice border and hover border like this site

    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 />


    The blog I need help with is

  2. 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;
  3. 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

  4. 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%

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

Topic Closed

This topic has been closed to new replies.

About this Topic