Hi
On the thumbnails of images on certain pages I want to show an overlay with the fontawesome “expand” icon, so user is more inclined to click and view in lightbox.
Here is the icon I mean:
Here is my CSS code:
/* Wrapper for hover-overlay */
.acf-fancybox-galerij a {
position: relative;
display: block;
width: 100%;
overflow: hidden;
border-radius: 4px;
}
/* Thumbnail image */
.acf-fancybox-galerij img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 4px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Hover effect on image */
.acf-fancybox-galerij a:hover img {
transform: scale(1.02);
opacity: 0.8;
}
.acf-fancybox-galerij a {
position: relative;
}
.acf-fancybox-galerij a::after {
content: "\f065"; /* unicode voor fa-expand */
font: var(--fa-font-solid);
font-style: normal;
-webkit-font-smoothing: antialiased;
position: absolute;
top: 8px;
right: 8px;
font-size: 18px;
color: white;
background-color: rgba(0, 0, 0, 0.6);
padding: 6px 8px;
border-radius: 4px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
line-height: 1;
}
/* Toon overlay op hover */
.acf-fancybox-galerij a:hover::after {
opacity: 1;
}
But on front end it only shows the failback square icon.
I also tried with this CSS but same result:
.acf-fancybox-galerij a::after {
content: "\f065"; /* Unicode voor fa-expand */
font-family: "Font Awesome 6 Free"; /* Classic solid style */
font-weight: 900; /* solid weight */
font-style: normal;
font-size: 20px;
color: white;
background-color: rgba(0, 0, 0, 0.6);
padding: 6px 8px;
border-radius: 4px;
position: absolute;
top: 8px;
right: 8px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
line-height: 1;
}
How can I get this to work? What CSS syntax to use for properly calling the correct FontAwesome icon?
Thanks in advance!
