Instagram Block photo hover

Is there a way to make my Instagram photos opaque with the logo when hovering over them? 

First photo attached is my Instagram feed on my website, second photo is an example of my request. 

Can you share link to this page? We can check easier

On 8/15/2024 at 9:50 AM, tuanphan said:

Can you share link to this page? We can check easier

https://www.lovisa.co.uk/ at bottom of page.

On 8/21/2024 at 4:38 AM, LULU3 said:

https://www.lovisa.co.uk/ at bottom of page.

I meant like to your site, we can test & give you code to achieve this easier.

On 8/23/2024 at 7:10 PM, LULU3 said:

https://luluthelabel.com/

This is my site

@tuanphan any update on this please?

On 8/26/2024 at 3:52 AM, LULU3 said:

@tuanphan any update on this please?

Use this code to Custom CSS box

/* hover */
#block-66b1395efac2a52f0691f786 {
.slide a:before {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
}
	/* caption hover */
.slide a:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    text-align: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    content: "";
    background-image: url(https://w7.pngwing.com/pngs/31/164/png-transparent-instagram-vector-brand-logos-icon.png);
    background-size: contain;
    width: 30px;
    height: 30px;
}
.slide:hover a:before, .slide:hover a:after {
    opacity: 1;
}}

Thank you, that worked. Is there a way to make the IG icon look more like the attached image please, where it is white and translucent around/inbetween it? 

7 hours ago, tuanphan said:

Use this code to Custom CSS box

On 8/28/2024 at 7:32 PM, LULU3 said:

Thank you, that worked. Is there a way to make the IG icon look more like the attached image please, where it is white and translucent around/inbetween it? 

I used random Instagram icon on Internet, if you can design an Instagram icon and send me, I will update to the code

On 8/30/2024 at 10:06 AM, tuanphan said:

I used random Instagram icon on Internet, if you can design an Instagram icon and send me, I will update to the code

Please can you use a plain black Instagram icon like the below?

https://www.iconpacks.net/free-icon/black-instagram-logo-3497.html

And can it go white when it goes opaque?

Use this code

/* hover */
#block-66b1395efac2a52f0691f786 {
.slide a:before {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
}
	/* caption hover */
.slide a:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    text-align: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    content: "";
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_10/black-instagram-logo-3497.png.d1b5efb2e43de160668d518b9152798a.png);
    background-size: contain;
    width: 30px;
    height: 30px;
}
.slide:hover a:before, .slide:hover a:after {
    opacity: 1;
}}

On 10/8/2024 at 11:11 AM, tuanphan said:

Use this code

/* hover */
#block-66b1395efac2a52f0691f786 {
.slide a:before {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
}
	/* caption hover */
.slide a:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    text-align: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    content: "";
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_10/black-instagram-logo-3497.png.d1b5efb2e43de160668d518b9152798a.png);
    background-size: contain;
    width: 30px;
    height: 30px;
}
.slide:hover a:before, .slide:hover a:after {
    opacity: 1;
}}

 

Thank you, this looks great on desktop but on mobile the icons are too big. How do I reduce them in size on mobile please?