/* =========================================================
custom.css
Portfolio card hover icon override → show briefcase
Place this file at: /httpdocs/assets/css/custom.css
Load it LAST in :
For portfolio subpages in /portfolio/*/, use ../../assets/css/custom.css
========================================================= */
/* Tweakable size for the hover icon */
:root { --portfolio-hover-icon-size: 56px; }
/* Ensure the media block is positioned for pseudo-element overlay */
.blog-card .media-block { position: relative; }
/* Hide the theme's default hover icon (book/blog) — common selectors */
.blog-card .media-block .mask::before,
.blog-card .media-block .link-overlay::before,
.blog-card .media-block .image-link::before,
.blog-card .media-block .lightbox::before {
display: none !important;
}
/* If the page previously injected a custom span icon, hide it to avoid doubles */
.blog-card .media-block .hover-briefcase {
display: none !important;
}
/* New hover icon (briefcase) using inline SVG */
.blog-card .media-block::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
center / var(--portfolio-hover-icon-size) no-repeat
url('data:image/svg+xml;utf8,');
opacity: 0;
transition: opacity .25s ease;
}
.blog-card .media-block:hover::after { opacity: 1; }
/* Optional: lift the image slightly on hover for a snappier feel */
/*
.blog-card .media-block img {
transition: transform .25s ease;
}
.blog-card .media-block:hover img {
transform: translateY(-2px);
}
*/