CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Terrell Anderson
Terrell Anderson

Reputation: 53

Using JavaScript to apply opacity to an div image

I was trying to use the :beforeselector 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?

Upvotes: 1

Views: 99

Answers (3)

Abdul Rahuman M
Abdul Rahuman M

Reputation: 86

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

Upvotes: 0

ms_nitrogen
ms_nitrogen

Reputation: 240

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.

Upvotes: 3

NurlanXp
NurlanXp

Reputation: 156

You can apply opacity to an img using javascript with an ID selector or other selectors, I will show you an example to apply opacity to img tag in div:

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

And you can add options to this js script (click, focus, blur and etc.) I showed basic way to apply opacity to img.

Upvotes: 0

Related Questions