-
AuthorPosts
-
February 2, 2018 at 4:46 pm #906896
Hi,
I opened a thread with the same question (https://kriesi.at/support/topic/target-all-images-except-from-one-with-a-custom-css/) and thought that I solved the problem, however using this CSS none of the images has a shadow. How could I fix this?
img { .avia-image-container-inner a { box-shadow: 0px 0px 20px #D9DCDE; } .avia-image-container-inner a:hover { box-shadow: 0px 0px 5px #CACDCE; } .avia-image-container-inner img { box-shadow: 0px 0px 20px #D9DCDE; } .image-overlay { visibility: hidden; } .mainimage { .avia-image-container-inner a { box-shadow: 0px 0px 0px #ffffff; } .avia-image-container-inner a:hover { box-shadow: 0px 0px 0px #ffffff; } .avia-image-container-inner img { box-shadow: 0px 0px 0px #ffffff; } .image-overlay { visibility: hidden; } }
Thank you in advance!
Best,
AntonFebruary 2, 2018 at 11:57 pm #907121Hey tonydobrevski,
.avia-image-container-inner a { box-shadow: 0px 0px 20px #D9DCDE; } .avia-image-container-inner a:hover { box-shadow: 0px 0px 5px #CACDCE; } .avia-image-container-inner img { box-shadow: 0px 0px 20px #D9DCDE; } .image-overlay { visibility: hidden; } .mainimage { .avia-image-container-inner a { box-shadow: 0px 0px 0px #ffffff; } .avia-image-container-inner a:hover { box-shadow: 0px 0px 0px #ffffff; } .avia-image-container-inner img { box-shadow: 0px 0px 0px #ffffff; } .image-overlay { visibility: hidden; }
Try the code like that please and let us know if it works.
Best regards,
BasilisFebruary 3, 2018 at 1:52 am #907149Hi Basilis,
Unfortunately, this code is not working. Is there anything else I could do?
Thank you in advance!
Best,
AntonFebruary 4, 2018 at 1:16 pm #907507Hi,
Please include the url to the page in question so we can take a closer look. Also specify which is the one image you don’t want a box shadow applied.Best regards,
MikeFebruary 6, 2018 at 2:06 pm #908587Hi Mike,
This is the page and I would like to target the first image on the page – the one with the house. Another option that is also possible is to target all the images that I would like to have a shadow.
Thank you in advance!
Best,
Anton- This reply was modified 6 years, 10 months ago by tonydobrevski.
February 7, 2018 at 4:48 am #908890Hi,
When I look at your site, it seems that the first image, of the house, already has the box shadow, Please see screenshot in Private Content area. I also see the box shadow on other images on other pages, this is what you wanted right? Please clear your browser cache and check.Best regards,
MikeFebruary 8, 2018 at 11:10 pm #910035Hi Mike,
I would like to have the box shadow on all images except the one with the house on the main page. When I posted the thread none of them had a shadow but this is because I had some other issues with the website. After fixing them all of the images have shadows. What can I do to target all the images except this one?
Thank you in advance!
Best,
AntonFebruary 9, 2018 at 3:35 am #910084Hi,
I added this code to the end of your Enfold Theme Options > General Styling > Quick CSS field:#top.home .avia-builder-el-5 img.avia_image { box-shadow: none!important; }
This works on the css principal of specificity, meaning that it is more targeted than your other css code. It’s also important that it is at the end of your file, so it is more important.
Please clear your browser cache and check.Best regards,
MikeFebruary 11, 2018 at 11:51 am #910735Hi Mike,
It worked, however after I made few changes on the main page, it stopped working. How can I fix this? And furthermore, there are few images that I would like to target. So is it possible to target only the images that I want to have with shadows?
Thank you in advance!
Best,
Anton- This reply was modified 6 years, 10 months ago by tonydobrevski.
February 11, 2018 at 4:17 pm #910754Hi,
Please try:.page-id-287 .avia-image-container-inner a,.page-id-78 .avia-image-container-inner a,.page-id-112 .avia-image-container-inner a,.page-id-239 .avia-image-container-inner a,.page-id-445 .avia-image-container-inner a { box-shadow: 0px 0px 20px #D9DCDE!important; } .page-id-287 .avia-image-container-inner a:hover,.page-id-78 .avia-image-container-inner a:hover,.page-id-112 .avia-image-container-inner a:hover,.page-id-239 .avia-image-container-inner a:hover,.page-id-445 .avia-image-container-inner a:hover { box-shadow: 0px 0px 5px #CACDCE!important; } .page-id-287 .avia-image-container-inner img,.page-id-78 .avia-image-container-inner img,.page-id-112 .avia-image-container-inner img,.page-id-239 .avia-image-container-inner img,.page-id-445 .avia-image-container-inner img { box-shadow: 0px 0px 20px #D9DCDE!important; } .page-id-287 .image-overlay,.page-id-78 .image-overlay,.page-id-112 .image-overlay,.page-id-239 .image-overlay,.page-id-445 .image-overlay { visibility: hidden!important; }
Please clear any cache plugin and your browser cache and check.
Best regards,
MikeFebruary 21, 2018 at 3:21 am #915154Hi Mike,
This code works perfectly! Thank you very much!
Best,
AntonFebruary 21, 2018 at 3:36 am #915161 -
AuthorPosts
- You must be logged in to reply to this topic.