My Art

/* ----------------------------------------- */ /* View slug: painting-portfolio - start */ /* ----------------------------------------- */ .portfolio-collection-wrapper { /* display: grid; gap: 1em; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */ columns: 250px 4; column-gap: 1em; } .portfolio-item-wrapper { position: relative; /* max-width: 350px; */ width: 100%; overflow: hidden; margin-bottom: 0 auto; margin-bottom: 1em; transition: transform 0.5s ease; } .portfolio-item-wrapper:hover { transform: scale(1.05); } .portfolio-item-wrapper img.masonry-content { width: 100%; object-fit: cover; object-position: center center; display: block; } .painting-title-overlay { font-size: 1.5em; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 15px; transition: opacity 1s; display: flex; flex-direction: column; justify-content: center; text-align: center; overflow: hidden; background-color: rgba(193, 50, 205, 0.75); font-family: "Quickpen"; } .painting-title-overlay h2 { color: white; } .painting-title-overlay:hover { opacity: 1; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; } .for_sale { position: absolute; top: 35px; right: -85px; background: var(--light-accent); padding: 10px 100px; transform: rotate(45deg); color: white; font-weight: 700; text-transform: uppercase; } /* ----------------------------------------- */ /* View slug: painting-portfolio - end */ /* ----------------------------------------- */