Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 26, 2015 at 7:14 pm #525146
    Julie

    Can you provide any help on the best/easiest way in Enfold to change color of images (custom icons inserted into image container) on hover? Each one would be a different color on hover.

    I could upload second images (colored versions), or could do as sprite and have different section displayed on hover, but not sure how to code CSS for this when using image container. Custom css classes is already enabled.

    URL of site showing images in containers is below. Animation that makes images larger on hover is turned on, I would like them to also change color or could turn off image enlargement and have only color change if that is difficult or not possible.

    I appreciate your recommendation on the best way to work this.

    October 27, 2015 at 5:38 pm #525669
    Yigit

    Hey Julie!

    Can you please add icons instead of images? Then it would be easier to accomplish such changes. Please see – http://kriesi.at/documentation/enfold/adding-your-own-icon-fonts/
    If you have icons under “Click below for info to help you get started.” in SVG format, you can upload them on fontello as well

    Cheers!
    Yigit

    October 27, 2015 at 6:36 pm #525743
    Julie

    Hi Yigit,

    Ok, I have substituted icons for the images. (May have to replace some with custom icons later, but that will take a little time.)

    I found this code in another thread and it works to change all to the same color: .
    av-icon-char:hover {
    color: red!important;
    }

    How can I designate a different color for each one on hover?

    Thanks so much for the help so far.

    October 27, 2015 at 7:50 pm #525767
    Yigit

    Hey!

    Please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and edit your elements and give them custom classes and use the code as following 

    .your-custom-class-one .av-icon-char:hover {
color: red!important;
}

.your-custom-class-two .av-icon-char:hover {
color: orange!important;
}

    Best regards,
    Yigit

    October 27, 2015 at 8:00 pm #525775
    Julie

    Wow, could not be any easier!

    Thanks so much for excellent support and prompt response.

    Best. theme. ever. :)

    October 27, 2015 at 8:22 pm #525783
    Yigit

    Hey!

    You are welcome, we are always happy to help!
    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘How to change image color on hover’ is closed to new replies.