Использование JavaScript для применения непрозрачности к div-изображению

Question

Я пытался использовать селектор :before для изображений, но выяснил, что это невозможно, но я читал, что могу сделать это с помощью javascript.

Я не профессионал в javascript и не совсем уверен, как писать код.

Это CSS используется

.carousel-cell.is-selected { 
background: #ED2; 
} 

/* cell number */ 
img.carousel-cell:before{ 
    display: block; 
    text-align: center; 
    content: counter(gallery-cell); 
    line-height: 200px; 
    font-size: 80px; 
    color: white; 
} 

Он используется в карусели, расположенной здесь ->http://codepen.io/desandro/pen/YPezvR

Теперь то, что я хочу сделать это :before и :after для carousel-cell, но для изображения в div.

Я пытался выполнить это с помощью javascript.

/* cell number */ 
img.carousel-cell:before{ 
opacity: 0.5; 
filter: alpha(opacity=50); /* For IE8 and earlier */ 
} 

/* cell number */ 
img.carousel-cell:after{ 
opacity: 0.5; 
filter: alpha(opacity=50); /* For IE8 and earlier */ 
} 

Может ли кто-нибудь помочь мне выполнить это?

Answer 1

css

.carousel-cell { 
    opacity: 0.5; 
} 
.carousel-cell.is-selected { 
    opacity: 1; 
} 

JS Lib дает фокус на элемент класс is-selected, и в файле CSS, вы можете добавить эти два бита кода, и вы должны быть, все в порядке, не бросая в JavaScript.

Answer 2

Вы можете применить прозрачность к IMG, используя JavaScript с селектором или другими селекторами, я покажу вам пример, чтобы применить непрозрачность IMG тега DIV:

<script> 
    document.getElementById("myimgid").style.opacity="0.5"; 
</script> 
<div> 
    <img id="myimgid" src="img url" > 
</div> 

И вы можете добавить опции к этому js script (щелчок, фокус, размытие и т. д.) Я показал основной способ применения непрозрачности к img.

Answer 3

.carousel-cell.is-selected { 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
    text-align: center; 
}