How to control the hover effect on links?

Golok · March 2017

Hello,

Can anyone tell me how to control / remove the hover effect found on some title links, such as on the Training theme, where an underline animates from left to right on the home page’s Blog teaser, and where the entire wrapper of a post title is filled from right to left in a Muffin Recent Posts widget?

I guess it has to do with the #Side_slide class, but I don’t see where to edit this in the theme’s options.

In advance thank you for your help.

Bryan · March 2017

Hi,

You can only change this using custom css. Send us a link to your website and we will write some code for you.

thanks

Golok · March 2017

Hi,

Thank you for your reply.

Unfortunately I can’t send you a link as for now (the site is not publicly available), but here are the two places where I wish to modify or remove the hover effect:

/* remove the displacement effect (slight move towards the top) but keep underline */
.blog-teaser li .desc-wrapper .desc { }

/* remove both fill-in effect and colored right border */
.Recent_posts ul li .desc { }

I’m using the “Training” template if this can be of any use.

In advance thanks a lot.

Bryan · March 2017

Hi,

I will not be able to help you until you show me the website, there are things that must be tested.

thanks

Golok · March 2017

Thanks for your reply.

I did a quick install for discussion purpose exclusively.

HOME
How to remove the displacement effect (slight move towards the top) but keep the underline on the Blog Teaser item's titles?
http://msigcndl.preview.infomaniak.website/xyz/

SIDE-BAR
How to remove both the fill-in effect and the colored right border on the "Alerts" side-bar?
http://msigcndl.preview.infomaniak.website/xyz/2014/05/04/11-2/

In advance thank you zillions for your precious help.

Bryan · March 2017

Hi,

To make all of your changes use this css

.blog-teaser li:hover .desc-wrapper {
    transform: translateY(0px) !important;
}
.sidebar.sidebar-1 aside ul li::after {
	background:none !important;
}
.sidebar.sidebar-1 aside ul li:hover a {
	color:black !important;
}

thanks

How to control the hover effect on links?

Comments