Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 20, 2017 at 10:09 pm #780823
    mcraig77

    Ahoy,

    Any easy way to change these image color on rollover? Basically I want them to become green when someone rollovers and clicks them. the images are too detailed to become icons and I was looking for plugins that did this but couldn’t find anything… The images are transparent pngs so Ideally I would like just the object to turn green – not the whole image (white space).

    I kinda want it to work like the new tab section works. I just dont need them to open a tab, I need them to link to a page.

    Please Advise

    April 21, 2017 at 2:55 pm #781221
    Yigit

    Hey

    Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your image elements and give them a custom CSS class (“your-custom-class” in example below) and then add following code to Quick CSS in Enfold theme options under General Styling tab

    .your-custom-class .avia_image:hover img {
    background-color: #e2e2e2;
    border-radius: 100%;
}

    Best regards,
    Yigit

    April 21, 2017 at 7:08 pm #781350
    mcraig77

    Yo Yigit,

    Thanks for this. This is not quite what I’m trying to achieve. Here is what I want. This is how it currently is screenshot 1. When I rollover I want it to look like this screenshot 2. Is there a way to do this in enfold or do you know of any plugins to achieve this? I would like this to still be a link.

    April 22, 2017 at 7:26 am #781575
    John Torvik

    Hi,

    The Yigits code doesnt work because you`re using an image, so, you need to follow this steps:

    Enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your image elements and give them a custom CSS class (“your-custom-class” in example below) and then add following code to Quick CSS in Enfold theme options under General Styling tab

    .your-custom-class .avia_image:hover img {
    background-image: url('your-green-image.png);
    background-repeat: no-repeat;
}

    P.S: Youll need to create the same image, but its should be green.

    Best regards,
    John Torvik

    April 22, 2017 at 8:41 pm #781759
    mcraig77

    Yo John,

    I added a custom class to the image and added that code but it didnt seem to work… Here is what I did:

    I added this custom class to the image (screenshot 1)

    Than I added this code to the quick CSS (private)

    I also have this bit of quick css to hide the old rollover icon. If I remove this the old icon shows.

    .avia_image .image-overlay {
    display: none !important;
}

    Also when I add the .image-hover-garagedoors css it changes the styling on my page and creates white space on both sides of page. As you can see it moves the side margins in the screenshots.

    Let me know how to solve this, I have to make 5 rollover icons. I included a login just in case you need it.

    April 23, 2017 at 9:40 am #781914
    John Torvik

    Hi,

    Thanks for the info :) I solved your problem adding these custom CSS code:

    .image-hover-garagedoors:hover {
  background-image: url('https://www.mesagaragedoors.com/wp-
  content/uploads/2017/04/garagedoors_hover.png') !important;
  background-repeat: no-repeat;
  display: block;
  width: 148px;
  height: 139px;
}

.image-hover-garagedoors:hover .avia_image {
  display: none !important;
}

    Just repeat the custom class process and replace the “image-hover-garagedoors” and the background-image url.

    Best regards,
    John Torvik

    April 24, 2017 at 7:34 pm #782488
    mcraig77

    Hey john,

    It looks like it works but the image no longer has a link on it…. I need these to link to other pages still. They are setup on the backend to but when I click on it nothing happens.

    Please Advise

    April 28, 2017 at 7:13 am #784319
    Ismael

    Hi,

    Please alter this code:

    .image-hover-garagedoors:hover .avia_image {
  display: none !important;
}

    Replace it with:

    .image-hover-garagedoors:hover .avia_image {
  opacity: 0 !important;
}

    Best regards,
    Ismael

    April 28, 2017 at 6:49 pm #784763
    mcraig77

    Ahoy Ismael,

    That worked! I have one other quick issue/ question. Any way we can reduce the shaking icon hover? Here is a video of the issue. As you can see the hover shakes on and off when i hover outside of it.

    May 1, 2017 at 9:50 am #785610
    Basilis

    Hi,

    I loaded the site and that effect is not visible anywhere.
    Are you checking with a specific way? What browser?

    Best regards,
    Basilis

    May 1, 2017 at 8:16 pm #785955
    mcraig77

    That video is from chrome on my macbook pro 15 in. Not checking it any specific way….

    May 2, 2017 at 6:50 am #786163
    Ismael

    Hi!

    You should add the hover effect to the “avia-image-container-inner” container. Example.

    .image-hover-turf:hover .avia-image-container-inner {
    background-image: url(//www.mesagaragedoors.com/wp-content/uploads/2017/04/truf_hover.png) !important;
    background-repeat: no-repeat;
    display: block;
    width: 149px;
    height: auto;
    background-size: 100% 100%;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.