Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1370212

    Hello,

    Here i found some nice effect i’d like to try:
    https://kriesi.at/support/topic/change-image-with-mousehover-at-partnerlogo-element/

    From there i go this code:

    #top .avia-logo-element-container img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: gray;
        -webkit-transition: all .6s ease;
        transition: all .6s ease;
        -moz-transition: all .6s ease;
        -o-transition: all .6s ease;
    }
    #top .avia-logo-element-container img:hover {
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -o-filter: grayscale(0%);
        filter: none;
    }

    but it is not working for me….

    but this one (adjust padding) is working well:

    /* --- Partner Logo Image padding in footer ---*/
    #top .avia-logo-element-container .slide-entry  {
        padding: 20px!important;
    }

    thank you
    Kind Regard
    jens

    #1370432

    Hey Jens,

    Thank you for the update.

    There are minor changes in the partner/logo element in the recent update, so you need to adjust the css a bit. Please try this code instead.

    #top .avia-logo-element-container .slide-entry-wrap .slide-entry .av-partner-fake-img {
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: gray;
      -webkit-transition: all .6s ease;
      transition: all .6s ease;
      -moz-transition: all .6s ease;
      -o-transition: all .6s ease;
    }
    
    #top .avia-logo-element-container .slide-entry-wrap .slide-entry:hover .av-partner-fake-img {
      filter: grayscale(0%);
      -webkit-filter: grayscale(0%);
      -moz-filter: grayscale(0%);
      -o-filter: grayscale(0%);
      filter: none;
    }
    

    You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    #1370453

    Hi Ismael,
    thanks a lot – this is working now.
    While creating the website we have disabled all merging caching options.
    That is much more easy if you make a lot new stuff and changes….

    You can close this as solvet
    Kind Regards
    jens

    #1370512

    Hi,

    Glad to know that the suggestion is working. Please feel free to open another thread if you have more questions related to the theme.

    Have a nice day.

    Best regards,
    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Change image with mousehover at Partner/Logo Element’ is closed to new replies.