Change picture hover effect.

[dd_mel]

Hi,

I have two questions:
1. How to change the hover effect of a picture (used swift page builder)? Please see the attachment 1 for details. Currently it has green background and doc/link icon on it. I tried to modify the css, but the green always sit there. I would like to make it a little bit transparent (white) with modified words on it.

2. For those pure images, not embed in any page builder elements, is that possible to add some hover effect on them? (For example, you can go to the repair page, and you will find several repair categories in different colors. When you hover the mouse on them, there is no effect at all.)

Thank you.

Regards,
Rebecca

[Kyle – SUPPORT]

Hi

1) No attachment?

2) The only hover possible with these images is to change the opacity

– Kyle

[dd_mel]

Hi Kyle,

Thanks for reply.

I have attached the screenshots here.

I tried to change the background-color(currently is green in attachment), but it will only turns to my color for 1 seconds, and will then turns to green again.

I have no ideas how to change this hover effect.

Thank you.

Regards,
Rebecca

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

It will use your accent colour for the background

– Kyle

[zm71]

Borrowing the thread, in what folder do i find the “hover images” (like she attatched above) and what are they named? I want to replace them with my own. Guess it´s only transparent png files?

[Kyle – SUPPORT]

Hi

You mean the icon? It’s not an image, like I said you can change the color, it uses your accent color

– Kyle

[zm71]

Thanks for your fast reply.
yeah i mean the icon(s). Hmm. Not possible to just make an easy image switch then?

was thinking about just replacing them on the ftp with own image and save with exactly same size, name, file-ending etc..

[Rui Guerreiro – SUPPORT]

Hi,

since it uses the Font Awesome, you can choose other icon to that place. Let us know the code of the icon so we can provide you some css.

http://fortawesome.github.io/Font-Awesome/icons/

To place a custom image that would require some customization that unfortunately goes outside the scope of our support.

-Rui

[zm71]

okey, cool! lets try this one for blog <i class="fa fa-forward"></i>(http://fortawesome.github.io/Font-Awesome/icon/forward/)

and try this with the link; <i class="fa fa-expand"></i>

i guess its pretty easy even for me and my very limited css knowledge to change icon later…

[Rui Guerreiro – SUPPORT]

Just add the code below to your custom css option in Theme options.

.fa-link:before {
    content: "\f04e"!important;
}

-Rui

[zm71]

thanks a bunch! Did you see my edited post?

for blog <i class="fa fa-forward"></i> and try this with the chain-link-icon; <i class="fa fa-expand"></i>

[Rui Guerreiro – SUPPORT]

Not sure if I understood correctly. This one is for the replace the link

.fa-link:before {
    content: "\f065"!important;
}

And this one for the other icon

.fa-file-text-o:before {
    content: "\f04e"!important;
}

-Rui

[zm71]

First works like a charm. Thank you!

2nd, for the other icon does not work.

[Rui Guerreiro – SUPPORT]

Can you provide me admin access? Maybe some error in the css rules.
It worked fine when replace it in the browser

https://www.dropbox.com/s/3s3di1c2xanzzmq/Screenshot%202015-07-29%2016.08.53.png?dl=0

-Rui

[zm71]

This reply has been marked as private.