Description
- adding overlay color over image and change overlay color to another color on hover
- view demo – password: abc
- buy me a coffee
#1. Install Code
#1.1. You can use code to Custom CSS box
/* 10.26c21v16 Portfolio Image Overlay */
#gridThumbs{
--po-color:rgba(20,18,16,.35);
--po-hover-color:rgba(20,18,16,.15);
--po-speed:.5s;
}
#gridThumbs .grid-image{position:relative;overflow:hidden}
#gridThumbs .grid-image::before{content:"";position:absolute;inset:0;z-index:1;background:var(--po-color);transition:background var(--po-speed);pointer-events:none}
#gridThumbs .grid-item:hover .grid-image::before{background:var(--po-hover-color)}
#1.2. You can adjust color, hover color here
--po-color:rgba(20,18,16,.35); --po-hover-color:rgba(20,18,16,.15);