How to add style to webp images

Question

my code looks like

<picture>
  <source type="image/webp" srcset="img/photo.webp">
  <source type="image/jpg" srcset="img/photo.jpg">
  <img src="img/photo.jpg" alt="">
</picture >

I want to add class to this picture so I can use border-radius. how can I do that?

Does this answer your question? [How to add CSS class to the HTML5 picture element](https://stackoverflow.com/questions/28008293/how-to-add-css-class-to-the-html5-picture-element) — Libra, Dec 18 '19 at 21:58

score 1 · Answer 1 · answered Dec 18 '19 at 21:57

Put the class on the <picture> tag

<picture class="classname">
  <source type="image/webp" srcset="img/photo.webp">
  <source type="image/jpg" srcset="img/photo.jpg">
  <img src="img/photo.jpg" alt="" >
</picture>

Target the <img> tag in the CSS like this

.classname img{
    styles here
}

How to add style to webp images

1 Answers1