WT Enterprise - Image change on hover

Home › Forums › Support › WT Enterprise - Image change on hover

Tagged: , ,

Miguel Cutrin
Posted 5 years, 6 months ago

Hi,

I was wondering if there is a simple way, already implemented into WT Enterprise, to change one image for another one on hover.

I’ve tried using the following code structure:


<figure class="uk-overlay uk-overlay-hover ">
        "IMAGE1"
            <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade"></div>
              <div class="uk-overlay-panel uk-overlay-fade uk-flex uk-flex-center uk-flex-middle uk-text-center">
               <div>
                "IMAGE2"
              </div>
            </div>
       </figure>

I imagined that maybe the overlay could change the images and that would be it, but it doesn’t work the way I’d like to, since it’s overlaying the second image over the first, when the only thing I want is to emulate a image that changes its color.

The idea is to have a matrix made of some client logos in grey scale, and on hover, emulate a coloring effect on the logo.

Thanks in advance for the help.

Miguel

  • This topic was modified 55 years ago by .
Miguel Cutrin
Posted 5 years, 6 months ago

Well, that was the first time I tried the overlay, but it still doesn’t fit my purpose. The effect is really cool, but I would want to change the image itself to another one, instead of placing other layer above the first picture.

I can probably use this overlay effect to place a new picture above te original one, instead of fading the layer, but I was wondering if there was something already implemented.

Thank you though!

Miguel

Miguel Cutrin
Posted 5 years, 6 months ago

Hi!

Yes now I see the new image on Hover, but I think that my template might be lacking on some classes. I tried adding the same code that is displayed in the link you provided, and it doesn’t perform the image change on hover as the demo does.

As I understand, this is the piece of code that I should be adding to replicate the image changing on hover:



<div class="ui-image-overlay">
    <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
        <img alt="Image ALT" src="" />
        <div class="uk-position-cover uk-transition-fade">
             <img alt="Image ALT" src="" />
        </div>
        <div class="uk-position-cover uk-overlay-primary uk-transition-fade"></div>
        <div class="uk-position-center"><div class="uk-overlay uk-margin-remove-first-child uk-transition-fade">
            <h3 class="ui-title uk-margin-remove-bottom uk-margin-top">Hover Image</h3>
            </div>
        </div>
    </div>
</div>

If I do it that way, I can only visualize the image that is supposed to be seen on hover.

I’ve looked into the “theme.css” file of my template and there is no “ui-image-overlay” class, so probably that’s the main issue.

I might need to do something before using the Helix funcionalities, because I clearly haven’t.

I will continue trying though.

Thanks,

Miguel

  • This reply was modified 55 years ago by .

You must be logged in to reply to this topic.