How can you change the opacity of a single image in html/css-CodePudding

Im trying to change the opacity of a single image and what im doing right now is

    img {
  opacity: 0.5;
}

But when i do that all the other image's opacity gets turned to the same value. How do i single out the image so that i only the that image's opacity

CodePudding user response：

#image {
  opacity: 0.5
  }

<img src="#" id="image"/>

Give the image a class or id, and set opacity to that id or class name.

CodePudding user response：

Use a specific selector such as an id and class

<style>
#opacityImg {
    opacity: 0.5;
}
</style>

<img id="opacityImg" src="/path">

The id or class selector is more specific than a tag selector like img

CodePudding user response：

Make sure the image you want to style has a Class or ID so it will only effect the desired image(s). Then just use -

Class/ID {
    opacity: 0.5; /* enter desired opacity */
}

Keep in mind if you're using a Class you need to make sure that the Class name is after a period in your style tags. E.g

.ClassName {
    opacity: 0.5;
}

Or if you're using an ID it needs to follow the pound sign. E.g

#IdName {
    opacity: 0.5;
}

Using a Class will allow you to apply the opacity styling to any image you want to in the future. If you only intend to use it for this one image ever then and ID will be sufficient.