search

fians / Waves

Click effect inspired by Google's Material Design
http://fians.github.io/Waves/
MIT License
3.48k stars 503 forks source link

Why i tag with waves-effect class appears around img? #189

Open hackuun opened 6 years ago

hackuun commented 6 years ago

If I use div then everything ok. But if I apply it to img then it broke my markup - i tag appears around img

hackuun commented 6 years ago

Ok, I found this - https://github.com/fians/Waves/issues/121

Then another question - how then I style img if i is not allowing me to do that? I mean, I want to make it 100% width but I can't, because i tag appears.

fians commented 6 years ago

Hi @iamdubx, the reason why I put wrapper tag (in this case <i> on the image because the ripple effect need a container in order to work properly. Without wrapper tag, the ripple will broken.

This is how it looks like when the Waves attached in the <img> tag.

<i class="waves-effect">
   <div  class="waves-ripple waves-rippling"></div>
  <img src="#" />
</i>

Can you show me an example in jsfiddle of your problem? I suspect you have styling on your <i> tag that make your image styling is broken. But I will consider to change <i> with <div> for the wrapper if it necessary.