If you use the mix-blend-mode, it automatically affects all child elements of the object in question. By using a pseudo element and the position, this problem can be solved.
.elementor-portfolio-item:hover .elementor-portfolio-item__overlay { position: relative; width: 100%; height: 100%; transition: .5s; } .elementor-portfolio-item:hover .elementor-portfolio-item__overlay:before { background-color: #c0001f; mix-blend-mode: multiply; transition: .5s; content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .elementor-portfolio-item__title { position: absolute; padding: 25px; z-index: 1; bottom: 0px; }