[ThaiModerator]

Hi @acbrent25,

Please follow these steps:

1] Add the following CSS under Customizer > Custom > Edit Global CSS:

.hover-effect {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>&l…3 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
}
.hover-effect:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>&l…1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

2] Add the hover-effect CSS class to the class field of your images:

View post on imgur.com

Hope it helps 🙂

[acbrent25Participant]

Holy hell! I just figured it out. You are a lifesaver!!!!

Thank you

[acbrent25Participant]

Hey Thai,

Sorry to be a pain in the butt, but the reason I was having trouble is that I couldn’t add an image class due to the fact that I was using a feature box.

So instead I created a text box at the bottom left and applied the technique above. Works great in chrome but the image won’t appear at all in Firefox.

What is the issue? http://macleanagency.virtuentmedia.com/our-team/

[ChristopherModerator]

Hi there,

Yo can’t add class to feature box image directly.
If you want to use feature box add hover-effect to feature box class field and update your code to :

.hover-effect img {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%); /* For Webkit browsers */
  filter: gray; /* For IE 6 - 9 */
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}

.hover-effect img:hover {
filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

Hope it helps.

[acbrent25Participant]

Thank you so much!!! It works now. You are a lifesaver. This client really wanted this feature and I have never done it before.

[John EzraMember]

You’re most welcome! 🙂

[citrusstudiosParticipant]

Hi, we want to change the Mouse over effects in the Envira Gallery images. Is this possible to do this?

thanks

[FriechModerator]

Hi There,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thanks.

[cleokerkhofParticipant]

Ok, I got a weird problem on my webpage http://www.fadeblank.com/events-2

When I implement this in CSS:
.my-image-class:hover {
content: url(your-site.com/your-hover-image.jpg);
z-index: 999;
width: 100%;
}`</blockquote>

it works for ONE picture of the eight.
I checked if I do something different, but I don’t. I’m sure about this because when I change the URL to the onethat works when you hover it, it works on the other pics too. It did work before, it feels like some kind of error.
Can you check what’s up for me?

It looks like only the upper one is working. So I started adding the original CSS code. When I add underneath, but nothing is happening either.

<blockquote>.my-image-class: {
content: url(your-site.com/your-original-image.jpg);
z-index: 999;
width: 100%;
}`

Thanks in advance!

Cleo

[cleokerkhofParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

First image class is Han and you added CSS for this particular class which works properly, see the attachment.

Since each image has specific class name, it should have its CSS as well, e.g :

.Hand:hover {
    content: url(http://fadeblank.com/wp-content/uploads/2016/05/FB_BD_ASS_LOGOTEKST_.jpg);
    z-index: 999;
    width: 100%;
}

Or you should change all image classes to Han in case you want to use same image for all images hover state.

Hope it helps.

[cleokerkhofParticipant]

Hi Christopher, thanks for the reply.

Well, I know,
the thing is, I did exactly the same for the other images.
I pointed them to their own class, added their own URL in the custom css.
And indeed, if I wanted them to change in Han class, it works, with every image.
But its own image, doesn’t work. I really do not understand.

The weird thing is,
when I add your code with the wrong (Han) image like this:
It DOES show the right image, whut!

.Hand:hover {
content: url(http://fadeblank.com/wp-content/uploads/2016/05/FB_BD_ASS_LOGOTEKST_.jpg);
z-index: 999;
width: 100%;
}

.Hand:hover {
content: url(http://fadeblank.com/wp-content/uploads/2016/06/DEF_HEADER_FBWEEKENDER_NEWLOGO_HAND2.jpg);
z-index: 999;
width: 100%;
}`

While it doesn’t work without adding your “wrong” code. I think this is an error right?

I hope your following me haha. Because I barely follow myself right now.

Right now (adding the wrong code above the right one) works for almost all images except the last one and the 5th one -.-. Can you please check if I hit an error or if this is me?

Thanks for helping me out.

Cleo

[cleokerkhofParticipant]

The once that do hover, don’t really hover nice too, since they at first do not know where to hover to(which is not weird because of the 2 different links). You see it struggling.

So I just need a clear css for all my classes, is there another way to Rome for me?
I hope you can help me out, thanks.

Cleo

[ChristianModerator]

Hey Cleo,

We’re sorry but further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer.

Thanks for understanding.

[fewwillParticipant]

website URL: http://www.innerpeacecounselingservices.com/

I added the following code to my global CSS using appearance>customize>custom>:

.latest-image-class:hover {
content: url(http://yourfilename.jpg);
z-index: 999;
max-width: 100%;
display: inline-block;
}

I then added the class name (latest-image-class) to the class section where the image is located.

I am trying this out on the first image as I am trying to test the hover effect. It is not working at all. What am I doing wrong?

[Author]

Posts