Divi 5 Filterable Portfolio - hide link, hover effects help needed

Hi,

I have set up a Filterable Portfolio with 4 "projects" (using only the Project Title and Featured Image for each) on this page under the "some of our recent work" headline:

https://kme.c8d.myftpupload.com/

My goal is to hover over each album and reveal the Project (i.e., Album) title and the Project "excerpt" text. However, when I hover over each album, now a semi-opaque grey box appears (I think due to the <a> link property), and the title text does appear, after adding this CSS code to the module itself that I found online:

/* HOVER OVER SHOW TITLE */
.et_pb_portfolio_item .et_pb_module_header {
position: absolute!important;
top: 50%!important;
transform: translateY(-50%)!important;
text-align: center;
left: 20px;
right: 20px;
opacity: 0;
z-index: 10;
transition: all 0.3s ease;
pointer-events: none;
}
.et_pb_portfolio_item:hover .et_pb_module_header {
opacity: 1!important;
}
.et_pb_portfolio_item .et_overlay:before {
display: none!important;
}

.full-width-btn {
width: 100%;
text-align: left;
}


Is there a way to add or change the CSS to remove the grey hover, only show each Project's Title and Excerpt, and possibly launch a lightbox effect for each (although that isn't as important)?

Many thanks!

Paul

 

Hi, using the Divi 5 ai chatbot, I was able to change some hover behavior using this CSS... I have turned the hover pointer-events back on:

/* REMOVE HOVER EFFECTS (INCLUDING LINK TO PROJECT ITSELF) ENTIRELY

selector .et_pb_portfolio_item {
pointer-events: none;
} */

/* TO SHOW TITLE ON HOVER, COMMENT OUT LINES 1-5 ABOVE AND UNCOMMENT OUT THE CODE BELOW */

/* Remove grey overlay */
selector .et_overlay {
background: transparent !important;
}

/* Title + excerpt container */

selector .et_pb_portfolio_item .et_pb_module_header,
selector .et_pb_portfolio_item .post-excerpt {
position: absolute;
left: 20px;
right: 20px;
text-align: center;
opacity: 0;
transition: all 0.3s ease;
pointer-events: none;
}

/* Center vertically */
selector .et_pb_portfolio_item .et_pb_module_header {
top: 45%;
transform: translateY(-50%);
}

selector .et_pb_portfolio_item .post-excerpt {
top: 60%;
transform: translateY(-50%);
font-size: 14px;
}

/* Show on hover */
selector .et_pb_portfolio_item:hover .et_pb_module_header,
selector .et_pb_portfolio_item:hover .post-excerpt {
opacity: 1;
}


HOWEVER, now I still see the "mouse hand" icon when I hover over, and there is a thin white border around the hovered item that I can't seem to target properly with CSS to remove. I would ideally like to hover over each item (which is a Divi "Project".. not a post or page) and show the Featured Image, the Project Title, and the Project Excerpt... can you provide the correct CSS for me? would be MOST appreciated.

Thanks!

Paul