WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Images in circles move slightly upon hoover (17 posts)

  1. TMNR
    Member
    Posted 1 year ago #

    Hi,
    When hoover state is triggered the image moves to the right and down a little and I can't trace what's causing it.

    I also noticed some strange behavior when changing the window size. 0-600px width - is ok. The weird stuff happens past 600px and up. When the window is enlarged pixel by pixel, sometimes it works, sometimes it doesn't. It's really hard to explain, but I'm guessing it has something to do with percentage dimensions of thumbnails inside the circles.

    Issue observed on Firefox: Windows 7, FF ver. - 20.0.1, Linux, FF ver. - 19.0
    IE 10 works ok.
    Tested with my setup (child theme) and with original demo (http://spun-demo.calobeedoodles.com/).

    http://wordpress.org/extend/themes/spun/

  2. Keyboard_Headaches
    Member
    Posted 1 year ago #

    It looks like its the transition

    transition: all 0.3s ease-in-out 0s;

    at line 776 and I think theirs a hover transition as well that causing the image to slightly move a bit upon hover and un-hover, lol try removing them and see what happens.

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try to avoid editing the theme's files.
    Make your modifications through a Custom CSS plugin like this oine http://wordpress.org/extend/plugins/custom-css-manager-plugin/ .

  4. Keyboard_Headaches
    Member
    Posted 1 year ago #

    sorry, I was wrong, its actually coming from the filter on line 766 of your style sheet.

    filter: url("inc/desaturate.svg#greyscale");
  5. Keyboard_Headaches
    Member
    Posted 1 year ago #

    then you could compensate for the greyscale a bit by changing the opacity on line 766 to something like 0.3 or something

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    For me the issue in Chrome v.26 only occurs in the browser size of 2025px (width).

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can help eradicate the issue by floating the hovered images left;

    .blog .hentry a:hover img,
    .archive .hentry a:hover img,
    .search .hentry a:hover img {
     float: left;
    }
  8. TMNR
    Member
    Posted 1 year ago #

    Andrew, I see what you mean, but adding

    .blog .hentry a:hover img,
    .archive .hentry a:hover img,
    .search .hentry a:hover img {
    float: left;
    }

    to my child theme's style.css did not work.

    Keyboard_Headaches, I don't understand how opacity is related to moving an object? I've tried to change the opacity values to .3

    opacity: .3;
    -webkit-opacity: .3;
    -moz-opacity: .3;

    but it did not work either.

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    May you link your page with the issue?

  10. TMNR
    Member
    Posted 1 year ago #

    Had to upload it to live server, here you go:
    http://mududizainas.lt/mudu/

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    For some reason the opacity is causing the shift in Firefox.
    This;

    .blog .hentry a .attachment-post-thumbnail, .archive .hentry a .attachment-post-thumbnail, .search .hentry a .attachment-post-thumbnail {
        opacity: 0.8;

    Edit: And it's the filter.

  12. TMNR
    Member
    Posted 1 year ago #

    Ok, how do I fix it?

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    Okay, I'm working on that. Thanks.

  14. TMNR
    Member
    Posted 1 year ago #

    Don't get me wrong, didn't mean to be rude :) Thanks for looking in to it.

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

  16. TMNR
    Member
    Posted 1 year ago #

    Thanks Andrew

  17. Keyboard_Headaches
    Member
    Posted 1 year ago #

    Its the css "filter" rule that's causing it in that line of css, i was simply suggesting that to get back to how the image should look before hover you might wish to change your opacity to a lower value so it appears to have the same faded look as before - before you hover over it, thats all.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags