I want to apply this box shadow
box-shadow: inset 0 25px 100px rgba(0,0,0,.5);
to every thumbnail that theme is generating.
Can you let me know which is the best way to do it?
I supposed that adding it in img:before is not a great way, since it will affect every image.
Hi,
The theme thumbs have a class you could use in the CSS
– https://www.screencast.com/t/hcEknhq0E1KJ
That class will only appear on thumbnails so it will not affect all the images, you could use it in the code.
Thanks
Did you test it via your dev tools? I used the same line that you are browsing in the screenshot and after applying the code to the entry-thumb class, it appears only in a few thumbnails – not site-wide at thumbnails.
Seems it has to be applied to the container, not the thumb itself. I tried it like this
– http://prntscr.com/m2lq3q
Code used in example here
.td-module-thumb::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 25px 100px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 25px 100px rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 25px 100px rgba(0,0,0,.5);
}
There are still modules and blocks that are not affected by this.
Ie: block25
Like this it seems to work for that module as well – http://prntscr.com/m2wi01
.td-module-thumb::before,
.td-module-image::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 25px 100px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 25px 100px rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 25px 100px rgba(0,0,0,.5);
}
Sorry for expanding the question but your answer is not covering all thumbnails as I earlier mentioned.
Those are still unaffected: http://prntscr.com/m2ylq1
If it would be simple I would happily give you a code for it. Setting an inset box shadow over images can be difficult.
Try it like this again – http://prntscr.com/m2zx0t
.td-module-thumb::after,
.td-module-thumb::before,
.td-module-image::after,
.td-module-image::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 25px 100px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 25px 100px rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 25px 100px rgba(0,0,0,.5);
}
