Image Hover Effects Request!

Site URL: https://jlentertainment.ca

Hello!

I'm currently working on our company website, and have had some troubles with image-hover effects. When I have tried them out they effect every image on the page. This would be fine - however I use some images to display text to give the site a little more of an identity - but the problem is now when you hover over the images that are meant for text - they get affected and now become blurry or whatever the effect is. Is there any code (or a guide) to make it not effect certain images? Would be greatly appreciated! 

bonus: my CSS skills are not quite up to par - if anyone knows how to make the image slightly illuminate / glow on hover, that would be very cool! 

Thank you and all the best. 

Can you share access password?

sure, the password is morganisthebest  dont ask about that one haha 😋

On 3/5/2020 at 9:54 PM, Mkub said:

sure, the password is morganisthebest  dont ask about that one haha 😋

 

Have you fixed yet?

If not, which code did you use to create effect?

and which image you want to apply effect?

57 minutes ago, tuanphan said:

Have you fixed yet?

If not, which code did you use to create effect?

and which image you want to apply effect?

I haven't fixed it yet as I removed the old code entirely as it wasn't displaying the effect I was looking for. As my issue here being that some of my images are used to display text and I'd rather not have those blur - but no idea how to code something like that. 

edit: the images that should have the hover glow effect are the ones in the ARTISTS section - the four people images in a row. below that is the ABOUT section, where you'll see some text on a black/gold rectangle. that image should not get the hover effect. Thanks!

On 3/10/2020 at 9:57 PM, Mkub said:

I haven't fixed it yet as I removed the old code entirely as it wasn't displaying the effect I was looking for. As my issue here being that some of my images are used to display text and I'd rather not have those blur - but no idea how to code something like that. 

edit: the images that should have the hover glow effect are the ones in the ARTISTS section - the four people images in a row. below that is the ABOUT section, where you'll see some text on a black/gold rectangle. that image should not get the hover effect. Thanks!

Which code did you use? You can add Artists section id to before code, to apply on only artists section

On 3/14/2020 at 8:35 AM, tuanphan said:

Which code did you use? You can add Artists section id to before code, to apply on only artists section

Hi! I was using a basic ".image-block:hover {filter: blur(5px);}" because my coding knowledge is very limited despite trying to learn recently. note: this also blurs the caption under the image courtesy of squarespaces image block design options. (which is unwanted). unfortunately i would be asking for some help to write the code which shouldn't really be overcomplicated i dont think - i just dont have any idea of how to go about starting something like this. You seem to be on the right track with adding the artists section ID - I think you've already figured it out! But I'm not quite sure how to impliment that. Thanks Tuanphan! 

section#artists2 .image-block:hover {filter: blur(5px);}