Want to disable hover animation re: images on Academica theme

  • waltwould · Member ·

    Hello,

    I am using the Academica theme on the following site: cthistoryorg.wordpress.com, and thanks to helpful folks from this forum, I was able to disable via CSS a 4-px gray border around all images which appeared there by theme default.

    However, whenever I mouse over a hyperlinked image, the 4-px border reappears around the image, which often results in other elements below it moving around on the page.

    How would I disable this feature on all pages my site? I actually don’t mind having a border appear when someone mouses over a hyperlinked image, but in this case the border slightly alters the size of the image itself and jostles around other site elements as a result. (For example, when one mouses over the dark blue buttons on this page: https://cthistoryorg.wordpress.com/ct-history-list/) If there is no way to keep the border while removing the resizing behavior; I would be OK with removing the mouseover border if that’s the only way to stop the resizing issue.

    I am still very new to CSS. Using Firefox’s “Inspector” feature, it looks to me like this behavior is being dictated by a “hover” classification (if that’s even the right way to describe it), but I don’t know how to alter that with CSS on my own: 

    .column-content a:hover img, .single-attachment #content a:hover img, #content .gallery-item a:hover img {

    border: 4px solid #9acdea;

    Thank you so much for any help you can provide!

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

  • sfmerv · Member ·

    Try this 

    .column-content a:hover img {
    border: none;
}
  • waltwould · Member ·

    Worked like a charm. Thank you very much!

  • The topic ‘Want to disable hover animation re: images on Academica theme’ is closed to new replies.