Image hover border css difficulties (shifting)

  • Author
    Posts
  • #811274

    almostartist
    Member

    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 almostartist.wordpress.com.

    #811435

    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;
    }
    #811480

    almostartist
    Member

    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

    #811485

    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%

    #811492

    almostartist
    Member

    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

The topic ‘Image hover border css difficulties (shifting)’ is closed to new replies.