CSS img:after not working on Coppermine - html

Question

I was trying to add a CSS style in my Coppermine Gallery but It doesn't work. Here's the code I want to apply to the gallery thumbnails.
.image-wrap {
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
}
.image-wrap:after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 1px #1b1b1b;
-wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.image-wrap img {
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
The pseudo-classes for image links are a little bit weird to apply the image-wrap:after stylesheet and I went a little bit messy trying to figure out how to apply it. Here's the code I ended up writing for a:link .image{
/* pseudo-classes for image links */
a:link .image{
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
a:after .image{
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 1px #1b1b1b;
-wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
Here's my gallery. How can I do to make the CSS style work? THANK YOU SO MUCH! I love coding but sometimes it turns a little bit hard.

Answer 1

I'll gladly help, but i don't understand what you're trying to do here. Can we have an image of the result you want to get ?
Anyway, some general advices :
you don't need prefixes on border-radius and box-shadow anymore
you don't need to specify :link on a link tag.
consider using "top: 0; bottom: 0; left: 0; right: 0;" rather than width and height 100%.
Edit: Okay, now with your picture i understand.
So, the problem is here :
a:after .image {...}
Doing so, you don't target the :after pseudo-element, but a .image element wich would be child of it. So it's nonsense. What you should do is add a class on the link itself (if possible) or target it more precisely using selectors, and just work on this :after pseudo-element.
I'll make you an example if this isn't enough to help you. :)
Edit: Okay, i made an example anyway: http://jsfiddle.net/Manumanu/gon7kooa/
And if you wish to use it with hover: http://jsfiddle.net/Manumanu/gon7kooa/2/