.portfolio { clear: both; padding-bottom: 0; } .portfolio-item { display: block; overflow: hidden; position: relative; text-align: center; margin: 0; } .portfolio-item-image { display: block; width: 100%; overflow: hidden; position: relative; } .portfolio-item img { display: block; max-width: 100%; margin: 0 auto; width: 100%; height: auto; line-height: 0; transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); } .portfolio-item > a.portfolio-item-link { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9999; } .portfolio-item .portfolio-item-overlay { opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); z-index: 9997; } .portfolio-item .portfolio-item-title { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); opacity: 0; transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); z-index: 9998; margin-top: 40px; } .portfolio-item:hover .portfolio-item-title, .portfolio-item:focus-within .portfolio-item-title { opacity: 1; margin-top: 0px; } .portfolio-item > .post-edit-link { position: absolute; right: 10px; bottom: 10px; opacity: 0; transition: 0.4s all; z-index: 9999; } .portfolio-item:hover .portfolio-item-overlay, .portfolio-item:focus-within .portfolio-item-overlay { opacity: 0.95; } .portfolio-item:hover > .post-edit-link, .portfolio-item:focus-within > .post-edit-link { opacity: 1; } .portfolio-item:hover img, .portfolio-item:focus-within img { transform: scale(1.4); } /* Individual portfolio items */ .cpo_portfolio .portfolio-media { margin: 0 0 30px; } .cpo_portfolio .portfolio-image { text-align: center; } .cpo_portfolio .portfolio-content { }