Project hover color

Dear, I can’t get the hover color to change to color: #a0c10a;
my css so far doesn’t work 100% I want everything to be green to begin with, the colors I’ll change later. It is a local site, you can’t connect to it. I send you photo’s and some css of the site.

Kind regards,

Kevin
What I tried.
.portfolio-section.style2 .project-filter li a.active, .portfolio-section.style2 .project-filter li a:hover { color: #a0c10a; } .roll-project .project-title span { color: #a0c10a; } .portfolio-section.style2 .project-filter li a { color: #a0c10a;} .portfolio-section.style2 .project-hover li a:hover {color: #a0c10a; } .roll-project .project-title span li a:hover {color: #a0c10a; }

All css of the Gallery part of the site below:

.project-filter {
	margin: 20px 0 50px 0;
	text-align: center;
	padding-left: 0;
}
.project-filter li  {
	display: inline-block;
    position: relative;
    text-align: center;
    margin-left: -4px;
    background-color: #a0c10a;
	-webkit-transition: background 0.3s;
	   -moz-transition: background 0.3s;
	    -ms-transition: background 0.3s;
	     -o-transition: background 0.3s;
	        transition: background 0.3s;
}
.widget-area .widget .project-filter li {
		padding: 0;
}
.project-filter li a {
    color: #a0c10a;
    display: block;
    font-family: "Ubuntu",sans-serif;
    font-size: 13px;
    font-weight: 600;
    outline: 0;
		padding: 10px;
}
.project-filter li a.active,
.project-filter li a:hover,
#secondary .project-filter li a.active,
#secondary .project-filter li a:hover {
	color: #a0c10a;
}
.roll-project {
	width: 100%;
	padding-bottom: 50px;
	margin: 0;
}
.roll-project .project-item {
	margin: 0 0 30px;
}
.roll-project.fullwidth .project-item {
	float: left;
}
.roll-project.fullwidth .project-item {
	width: 20%;
	margin: 0;
}
.roll-project .project-item .item-wrap {
	position: relative;
}
.roll-project .project-item .pop-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 10px;
	z-index: 10;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 1s;
	   -moz-transition: all 1s;
	    -ms-transition: all 1s;
	     -o-transition: all 1s;
	        transition: all 1s;
}
.roll-project .project-item .project-pop-wrap {
	z-index: 20;
	width: 100%;
	height: 100%;
	position: absolute;
}
.roll-project .project-item .project-pop {
	color: #a0c10a;
	text-align: center;
	z-index: 1;
	width: 100%;
	height: 100%;
	cursor: pointer;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	     -o-transition: all 0.3s;
	        transition: all 0.3s;
}
.roll-project .project-item .project-pop a {
	color: #a0c10a;
}
.roll-project .project-item:hover .project-pop {
	opacity: 0.5;
}
.roll-project .project-item .project-pop h3 {
	font-size: 16px;
	font-weight: 700;
	line-height: 26px;
	position: absolute;
	left: 0;
	bottom: 50%;
	width: 100%;
	margin-bottom: -4px;
}
.roll-project .project-item .project-cat {
	width: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	padding-top: 20px;
	margin: 0;
}
.roll-project .project-item .project-cat li {
	display: inline-block;
}
.roll-project .project-item .project-cat li a {
	position: relative;
	font-style: italic;
	padding: 0 5px;
}
.roll-project .project-item .project-cat li a:before {
	position: absolute;
	content: "/";
	left: -3px;
	top: -1px;
}
.roll-project .project-item .project-cat li:first-child a:before {
	content: "";
}
.roll-project .project-item:hover .project-title-wrap,
.roll-project .project-item:hover > .item-wrap .project-pop{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-animation: pop-scale 0.5s 1 cubic-bezier(0.15, 0.85, 0.35, 1.25);
	   -moz-animation: pop-scale 0.5s 1 cubic-bezier(0.15, 0.85, 0.35, 1.25);
	        animation: pop-scale 0.5s 1 cubic-bezier(0.15, 0.85, 0.35, 1.25);
}
.roll-project .project-item:hover > .item-wrap .pop-overlay {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.project-title-wrap{
	position:absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 2;
}

.roll-project .project-item:hover > .item-wrap .project-title-wrap {
	border: 2px solid yellow;
}

.roll-project .project-title{
    display: table;
    width: 100%;
	height: 100%;
	text-align: center;
	color: #a0c10a;
	font-size: 22px;
	margin: 0;
	font-weight: 400;
}

.roll-project .project-title span{
  display: table-cell;
  vertical-align: middle;
  padding-left: 10px;
  padding-right: 10px;
  color: #a0c10a;
}

/* Style 2 */
.portfolio-section.style2 .project-item {
	width: 33.33333334%;
}
.portfolio-section.style2 .project-inner {
	margin: 15px;
	position: relative;
}
.portfolio-section.style2 .project-item:hover .project-pop {
	opacity: 0.9;
}
.portfolio-section.style2 .project-title-wrap {
	display: block;
	height: auto;
	width: auto;
	bottom: 0;
	padding: 30px;
}
.portfolio-section.style2 .project-title-wrap span {
	padding: 0;
}
.portfolio-section.style2 .project-filter li,
.portfolio-section.style2 .project-filter li a.active,
.portfolio-section.style2 .project-filter li a:hover {
	background-color: transparent;
}
.portfolio-section.style2 .project-filter li a {
	font-weight: 400;
	font-size: 16px;
	color: #a0c10a;
}
.portfolio-section.style2 .project-filter li a.active,
.portfolio-section.style2 .project-filter li a:hover {
	color: #a0c10a;
}
.portfolio-section.style2 .project-filter {
	margin-bottom: 15px;
}
.portfolio-section.style2 .project-filter li a {
	padding: 10px 18px;
}

the problem is :


Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .roll-project .project-pop {
      background-color: #fff000 !important;
    }

Regards,
Kharis

1 Like

Dear Kharis,

Thank you! It worked, and do you have also one for the menu hover above the photos?

Kind Regards,

Kevin

You’re welcome Kevin!

For project’s filter hover, try adding this code:

    .project-filter li a:hover {
      color: #fff000 !important;
      background-color: #ccc !important;
    }

Regards,
Kharis

1 Like

Dear Kharis,

Thank you!

Kind Regards,

Kevin

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

what do i need to do to get rid of the Hover White Empty tile on the portfolio module… i just need it to display the picture and thats it… it should be non clickable and no Hover and no text while hovering over it

Hello there,

Can you share a link to your page, so I can get the exact solution to suggest?

Regards,
Kharis
aThemes Support