Portfolio 4 Corners Border on Hover

Description

• adding borders to portfolio image on hover
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. You can use code to Custom CSS

/* 10.26c21v14 Portfolio 4 Corners Border on Hover */
#gridThumbs{
  --pb-color:#C2412B;
  --pb-space:16px;
  --pb-width:2px;
  --pb-radius:6px;
  --pb-rotate:-.8deg;
  --pb-zoom:1.15;
  --pb-speed:1.2s;
}
#gridThumbs .grid-image{position:relative;overflow:hidden}
#gridThumbs .grid-image img{transition:transform var(--pb-speed) cubic-bezier(.2,.7,.2,1)!important}
#gridThumbs .grid-item:hover .grid-image img{transform:scale(var(--pb-zoom))!important}
#gridThumbs .grid-image::after{content:"";position:absolute;inset:var(--pb-space);z-index:1;border:var(--pb-width) solid var(--pb-color);border-radius:var(--pb-radius);opacity:0;transform:scale(1.05) rotate(var(--pb-rotate));transition:opacity .35s,transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
#gridThumbs .grid-item:hover .grid-image::after{opacity:1;transform:scale(1) rotate(var(--pb-rotate))}

#1.2. You can adjust color here

--pb-color:#C2412B;

#1.3. Other option styles

--pb-space:16px;
--pb-width:2px;
--pb-radius:6px;
--pb-rotate:-.8deg;
--pb-zoom:1.15;
--pb-speed:1.2s;