[totes-mobileParticipant]

Hey guys,
I am trying to achieve something that I think would be rather simple, but I haven’t been having much luck. On my home page, I have a revolution slider with 1 slide (for now) and several layers of images that appear on that slide. 2 of the images are links to download our app from the app stores (google and apple). I’ve given the apple link image the class name “apple” and I’m trying to make the image invert colors when I hover over it.
For this, I have the original image and the invert-color version both uploaded to my media page, and I tried using a custom CSS to try this, but it isn’t as striaght-forward as I’d imagined it would be.

Suppose the URL for my original image is ‘Download-Apple.png’ and for the hover (inverse) version the URL is ‘Download-AppleInverse.png’.
Here’s the code I tried without success:

.apple:hover {
   background-image: url('Download-AppleInverse.png');
}

Any help would be appreciated.

-Jon

[totes-mobileParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in!

You could try this css code in your customizer, Appearance > Customize > Custom > CSS swap the images in your button.

.tp-caption a.apple {
    background: transparent url('http://www.totes-mobile.com/wp-content/uploads/2015/03/Download-Apple2.png') top left no-repeat;
    background-size: cover;
    display: inline-block;
}

.tp-caption a.apple:hover {
   background-image: url('http://www.totes-mobile.com/wp-content/uploads/2015/03/Download-AppleInverse.png');
}

.tp-caption a.apple img{
    visibility: hidden;
}

Please let us know if this works out for you.

[totes-mobileParticipant]

Worked perfectly, thank you so much! 😀

[NicoModerator]

You’re most welcome.

Let us know if you need anything else.

Thanks. Have a great day! 🙂

[SharoFFParticipant]

I would like to achive the same effect in my slider? How do I go about it?

Do I have a add a random button with text? and then somehow change its apperiance through the custom editor?

I aim not sure where to put a class for it?

[ifversenParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Add the class on the layer under the Layer Links & Advance Params tab.

Then add this under Custom > CSS in the Customizer.

.myclass {
    background: transparent url('INITIAL IMAGE URL') top left no-repeat;
    background-size: cover;
    display: inline-block;
}

.myclass:hover {
   background-image: url('HOVER IMAGE URL');
}

.myclass img{
    visibility: hidden;
}

Hope it helps, Cheers!

[ifversenParticipant]

Ok it worked thanks, but now it is not really a button anymore, as it doenst change mouse state to a link pressing state?

It has something to do with the last line, “visibility hidden” which if I remove, works fine… but the I only see the outline of the hover, as it is bigger imager than the initial one.

[FriechModerator]

Hi There,

So this image layer is a link, please update the css code to this:

.myclass {
    background: transparent url('http://www.tenderbar.dk/vladlens/wp-content/uploads/2015/08/Privat_knap_small.png') top left no-repeat;
    background-size: cover;
    display: inline-block;
}

.myclass:hover {
   background-image: url('http://www.tenderbar.dk/vladlens/wp-content/uploads/2015/08/Privat_knap_small_hover.png');
}

.myclass img{
    opacity: 0;
}

Hope it helps, Cheers!

[Author]

Posts