I need to leave a blur image, I'm applying CSS like this:
<style>
img {
-webkit-filter:blur(5px);
filter: blur(5px);
}
</style>
But when I add this property it goes to all images in the site, how do I leave just one photo with this effect using CSS?
Create a class specified for this image and apply the desired style to the class created, as shown below. By doing so, the defined style will be applied only to the image associated with the class created.
.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"> Use a specific chooser for id and add id to 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 .
See:
<style>
.imagem_especifica {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
</style>
When you use the id attribute on an element, to reference it in Css, just use # followed by id name. The class is the same, however you use . before the name.
You need to add a class for the image you want to apply the filter
<img src="algumacoisa.png" class="imagemBlur">
And in your css
<style>
.imagemBlur {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
</style>
In this way only those who have the class imagemBlur receive the filter;)
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 target 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 at Maujor .