Двойная тень <IMG>

[darlov]

Подскажите пожалуйста, хочу сделать тень картинки с изгибом концов, Ничего не получается, если за место img поставлю div, то получается тень, вот код:

.boxBlock {
	 /*width: auto;
height: auto;*/
/*min-width:100px;
min-height:60px;*/
background:#FFF;
margin:10px;
padding: 0px;
position: relative;
}
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}

<img src="images/girl.png"
class="boxBlock effect2">

[Softlink]

Псевдоэлементы для тега img, работали(а может еще работают) только в Опере. В вашем случае оборачивайте картинку в див и применяйте стили уже к нему.

[darlov]

Псевдоэлементы для тега img, работали(а может еще работают) только в Опере. В вашем случае оборачивайте картинку в див и применяйте стили уже к нему.

Я уже так пытался сделать, только не получается погонять размер картинки под родительский div. Может подскажите как

[Softlink]

Ну картинку в див, диву либо float, либо display: inline-block;, картинке display: block;

[darlov]

Ну картинку в див, диву либо float, либо display: inline-block;, картинке display: block;

Спасибо!!!