How to Add Hover Effect to all Clickable text - Fashionopolism Theme

Store Design
, , ,
1

I am trying to assist one of our clients who wants to add a hover effect as well as removing a current effect on all their text links. Currently there is no hover effect and when the link is clicked a box shows up like so:

35_1-1691773176447.png
35_1-1691773176447.png718×814 78.6 KB

They would like to add an effect similar to https://www.tiffany.com/ where the line appears when hovering over any text links. They would like the color of the line to be red which is within their branding.

35_0-1691773070839.png
35_0-1691773070839.png1600×652 129 KB

Any assistance would be greatly appreciated.

Here is a link to their current website: https://arthurgroom.com/

Thank you

2

Hello @35 ,

Check this example.

Thanks

3

Hi

Thank you for this example where would I input this string of code?

4

@35 , Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your stylesheet.css file and paste the following code below:

.prod-title.h4:focus {
    outline: 0 !important;
}
.prod-title.h4:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block; 
    right: 0;
    left: 0;
    background: #b7010e;
    transition: width .4s ease !important;
    -webkit-transition: width .4s ease !important;
}
.prod-title.h4:hover:after{
  width: 100%;
  left: 0;
  background: #b7010e;
}
5

@Guleria

Thank you for your response this worked for the body of the website is there a way to add this to the title and header?

Thank you