How to apply a rule to a specific element?

Asked

Viewed 130 times

0

I need to leave an image Blur, I’m applying the CSS this way: 

<style>
  img {
    -webkit-filter:blur(5px);
    filter: blur(5px);
  }
</style>

But when I add this property it passes to all images on the site, how do I leave only one photo with this effect using CSS?

css

  • Yes, you blur the image according to the intensity given by the value within the parentheses.

  • Oh yes, I was Grayscale.

4 answers

3

Use a specific selector for id and add the id in your image.

<img id="imagem_especifica">


<style>
  #imagem_especifica {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }
</style>

The id is used to reference only one object. If it is necessary to capture more than one element, but not all, I advise you to use class.

Behold:

<style>


 .imagem_especifica {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }
</style>

When you use the attribute id in an element, to reference it in Css, just use the # followed by the name of id. To class is the same thing, but you use the . before the name.

  • 3

    I think if it’s just for ONE element, I’d also go by ID. + 1

0


Create a class specifies for that image and applies the desired style in class created, as an example below. In doing this the style defined will be applied only to the image associated with class maid.

.imagem1 {
          -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
         }
<img class="imagem1" src="https://s-media-cache-ak0.pinimg.com/736x/33/b8/69/33b869f90619e81763dbf1fccc896d8d--lion-logo-modern-logo.jpg">

  • 1

    That’s right Leandro, your answer was very objective and solved my problem, thank you!!

0

You need to add a class to the image you want to apply the filter to

 <img src="algumacoisa.png" class="imagemBlur">

And in your css

<style>
    .imagemBlur {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
     }
</style>

So only those who have the class imagemBlur receives the filter ;)

0

You can set a class to the image you want to apply the effect to and then, in css, tell which image you want to achieve using the class selector. For example:

HTML

<img class="filter" src="imagem.jpg" alt="imagem">

CSS

.filter{filter: grayscale(100%)}

See a little more about selectors in this article on Maujor.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.