Применить CSS Alpha overlay на изображении

Question

Я пытаюсь применить альфа-оверлей на моем изображении. Прямо сейчас, это применяется по всему телу страницы, а не только к изображению. Помогите?

http://jsfiddle.net/21ku3o7f/

<div class="dimmed"> 
    <img src="http://placehold.it/300x300" /> 
</div> 

.dimmed:after { 
    content: " "; 
    z-index: 10; 
    display: block; 
    position: absolute; 
    height: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.3); 
} 

Answer 1

Это должно сделать трюк: http://jsfiddle.net/21ku3o7f/1/

<div class="dimmed"> 
    <img src="http://placehold.it/300x300" /> 
</div> 

.dimmed { 
    display: inline-block; 
    position: relative; 
} 
.dimmed:after { 
    content: " "; 
    z-index: 10; 
    display: block; 
    position: absolute; 
    height: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.3); 
} 
.dimmed img { 
    display: block; 
} 

Answer 2

Применить CSS код

<!-- begin snippet: js hide: false -->

<div class="dimmed"> 
 
    <img src="http://placehold.it/300x300" /> 
 
</div>

.dimmed:after { 
    content: " "; 
    z-index: 10; 
    display: block; 
    position: absolute; 
    height: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.3); 
} 
.dimmed{ 
    position: relative; 
    display: inline-block; 
} 
.dimmed img{vertical-align: top; 

Answer 3

Попробуйте так: Demo

CSS:

.dimmed:after { 
    content:" "; 
    z-index: 10; 
    display: block; 
    position: absolute; 
    height: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 255, 255, 0.3); 
} 

/* newly added code */ 

.dimmed { 
    position: relative; 
    display:inline-block; 
}