How to make the Portfolio hover content stay visible (also Rooms, Tours, Holes)

By default in the theme, the portfolio items have content that is visible on hover. If you would like to change the way it works, you have a few options. With each option, you can just add a bit of code into either your child theme, or the Custom CSS box under Appearance > Customize

If you just want to have the icon and text always visible, then you could use this code:

.th-port-center, .th-port-top-text {opacity:1}

That code will provide this result:

If you also want to have the color overlay always visible then you could use this code instead, and adjust the overlay opacity:

.th-port-overlay {opacity:0.5; background-color:#000}
.th-port-center, .th-port-top-text {opacity:1}

That code will provide this result:

You can also choose to have this effect only for mobile devices. If you just want to have the icon and text always visible for mobile devices, then you could use this code:

@media (max-width:767px) {     .th-port-center, .th-port-top-text {opacity:1}   }

If you also want to have the color overlay always visible then you could use this code instead, and adjust the overlay opacity:

@media (max-width:767px) {     .th-port-overlay {opacity:0.5; background-color:#000}
.th-port-center, .th-port-top-text {opacity:1}     
 }

If you wanted to make it work in reverse:

.th-port-overlay {opacity:0.5; background-color:rgba(4,80,137,0.8);}
.th-portfolio-item:hover .th-port-overlay {
    background-color:rgba(4,80,137,0.8);
    opacity:0
}
.th-port-center, .th-port-top-text {opacity:1}     

.th-portfolio-item:hover .th-port-top-text,
.th-portfolio-item:hover .th-port-center {
    opacity:0;

}