How to change project hover color?


I would like to change the project hover color, how can I do that? Original hover color is green, I want to change to other color.

Second problem, How can I change the icon background into transparent? and give a border color? Thanks!


Here is the CSS code to change the overlay color for the project items:

.roll-project .project-item .project-pop {
    background-color: red;

and here is to change the color of the service items:

.service .icon {
    border: 1px solid red;
    background-color: transparent;

You can add the CSS code in above to your site using Custom CSS plugin



It seems that both codes are not working. This is my website. The icon and the photo are in the homepage. Could you help have a look?

Oh, I ultimately found that .roll-project .project-item .project-pop { background-color: red; } is effective.

But the second one still need help.


For the second issue, did you change the widget? I noticed that was not service widget.
But, no worries… here is the CSS code:

#pg-122-3 .sow-container-round span {
    color: #24d2a5 !important;
#pg-122-3 .sow-container-round {
    color: transparent !important;
    border: 1px solid #24d2a5;
    border-radius: 50px;