Fade Effect on buttons / reactive menu help

  • Unknown's avatar
    foodiesdigestblog · Member ·

    Hello
    i am trying to add some fancy CSS effects to my theme … because why not … and I’m a bit stuck.
    basically i have embedded social media icons in the Text widget
    and what i would like to have is a Fade in/out when you hover over the icon … however i want the hovered icon to remain solid and the other three to fade, if that makes sense …

    i have added a class id “fade” to the images and can get them to each fade out individually using the below code.

    .fade {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    }

    .fade:hover {
    opacity: 0.5;
    }

    any help would be good.

    also in regards to the mobile phone menu
    im not sure how to format it … and i would also prefer to enable the small 3 bar icon rather than it having the word “menu” and if possible to break up the menu items so it is a little easier to read ….

    similar to this site’s reactive small menu
    http://scoopnutrition.com/about/

    sorry for the long post.

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

  • staff-jeanpierreac · Staff ·

    Hi!
    If I understand, you would like to

    1.- Start by having all buttons with opacity:1
    2.- When hover on a button, keep that button opacity:1 and style the others opacity:0.5
    3.- When mouse out that button, reset all buttons with opacity:1

    In that case, the only way I know to do that is with javascript, and you cannot do that with WordPress.com (check it here: https://en.support.wordpress.com/code/) to avoid security issues.

    Why don’t you try to start with all your buttons faded (opacity:0.5) and highlight (opacity:1) when mouse is over? (Just the opposite you are doing right now)

    Hope this could help you.

    Have a nice day!

  • Unknown's avatar
    foodiesdigestblog · Member ·

    i give up … i have tried loads of things i thought would work and nothing ….
    not really a big deal …

    in regards to my reactive menu
    i have managed for format most of it how i want …

    however i have two problems
    i cannot workout where to change the text colour
    and when the menu is collapsed the background colour changes back to black.

    ideally i would like the word menu replaced with a 3 bar icon
    any help on this would be good … and then i am pretty much done messing with the CSS :)

  • Unknown's avatar
    foodiesdigestblog · Member ·

    i fixed the problem using CSS so feeling pretty awesome …
    here is the code for anyone interested

    basically i use the widget itself as the parent
    and the ‘a’ tag used in the href picture links as the children …
    and then it excludes

    would likely be a million times easier if you could edit the HTML …
    but either way … it works

    /*fade transition for social media buttons*/
    .textwidget {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    }

    .textwidget:hover > a {
    opacity: 0.5;
    }

    .textwidget:hover > a:hover {
    opacity: 1.0;
    }

  • The topic ‘Fade Effect on buttons / reactive menu help’ is closed to new replies.