Terrell Anderson Terrell Anderson - 3 months ago 9
CSS Question

Using JavaScript to apply opacity to an div image

I was trying to use the

:before
selector for images, but found out that it's not possible, but I read that i can do it using javascript.

I'm not a pro at javascript and not exactly sure how to write the code.

This is the css being used

.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;
}


It's being used in the carousel located here --> http://codepen.io/desandro/pen/YPezvR

Now what I want to accomplish is a
:before
and
:after
for the
carousel-cell
but for the images in the div.

I was trying to accomplish this with 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 */
}


Can anyone help me to accomplish this?

Answer

css

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

The JS lib gives the focus item a class of is-selected, and in your css file, you can add those two bits of code and you should be a-okay without tossing in javascript.

Comments