CSS Drop-Shadows Without Images
- by Spencer B.
I'm trying to use Nicolas Gallagher's brilliant CSS work on applying CSS drop-shadows to elements without images and without extra markup using the :before and :after pseudo-elements. His code is provided below...
.drop-shadow {
position:relative;
width:90%;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-1;
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.drop-shadow:after{
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
I'm trying to target all images wrapped with an a tag, which in Wordpress are really full-size images that have been resized to a medium height and width in the backend. When the user clicks on the smaller image in the post, it opens up a new tab with the fullsize view of the image (I'm sure you're already familiar with this if you use Wordpress). For some reason, I can't get his code to work, and I'm wondering if I'm targeting this wrong within my CSS. Can you help?
In place of the .drop-shadow class that he uses, I'm target all images wrapped with an a tag within the #main-i div. So, like this...
#main-i a img
Does anyone know how to target it better than I have so that I can get the drop shadows to be applied for all images within the specified div?
Thanks for your help!
P.S. An example of the image I am wanting to target with this CSS is the picture of the Haitian boy here: http://lifebridgecypress.org/our-heart/seventy-two/help-haiti
