Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Mkub

Image Hover Effects Request!

Question

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. 

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 1

Can you share access password?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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

 

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)
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!

Edited by Mkub

Share this post


Link to post
  • 0
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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
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! 

Share this post


Link to post
  • 0
section#artists2 .image-block:hover {filter: blur(5px);}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...