Hover Effects

  • Hello Vlad!
    I would like to know if it is possible put that hover effect in service icons or some similar thing :

http://pepsized.com/icon-fonts-in-use-with-a-fancy-hover-effect/

Hello,

Nope, that wouldn’t be possible. Maybe something different if you want.

Hi Vlad

I have a question about the icons pop-up when hover projects in Moesia.
Can I change or delete them ?

Hey,

You can delete them. Changing them (in an update-proof manner) would be more complex. Which one would you like to remove?

Ok. I would like to keep the magnifying glass but linked to the project instead of the other icon.
So practically I want to delete the other icon and change the link of the magnifying glass. Could I ?

Nope, you can only delete it. I mean you can do anything you want, but it will require a child theme and some code changes. I could guide you through that if you really want it, but I don’t think there is much point in doing all that is required for this just to change an icon.

The problem is that visitors don’t get well these icons. That why I should change them. Otherwise may be you’re right and I’ll just delete the magnifying glass. I don’t really need it. And that will help visitors to reach the goal - open the project.
Could you please tell me how to hide the magnifying glass icon ?

Use this in a custom CSS plugin please:


.pp-icon {
     display: none;
}
.project-image:hover > .link-icon {
     left: 40%;
}

Wait a second, I just realized that you can also change the icon with a bit of CSS. Have a look here please and let me know what icon you want and I’ll give you the code afterwards.

That’s great. Thank you. I think this icon will match perfectly for the case :
fa-chevron-right []

Thank you !

I think this should do it:


.link-icon .fa-link:before {
	content: '\f054';
	margin-left: 8px;
}

You should still use the first code I gave you to remove the magnify icon.

This icons list is great. Thank you. I think I’ll use it again in the same way.
Thank you for the help Vlad !

Vlad,

Is it possible to hide this link-icon and to link the project-image to the project page ?
I want also to keep this fading effect on the image while hover.
Thanks.

Nope, not without some serious code changes. But didn’t you manage to change the icon to the one you wanted using the code I gave you?

Oh yes the code works just perfect.
But actually I like it most without the icon, but if it’s so serious don’t bother yourself.
I thought it will be easy because I can hide the link-image but I don’t know how to make the thumb image a link to the project.

It’s no bother for me because I already posted this before, only things extra would be to tell you how to wrap the thumb in a link.
But you would need to create a child theme for this and note that all changes you made from the Customizer will have to be re-done in the child theme.