How to blur image in html?

Answer 1

few more filters to play with , the css for any used filter will be in the bottom

https://code.sololearn.com/WtmaPIKZl5RL/?ref=app

Answer 2

Hello, Min Pyae Sone !
learn, use the search for lessons and then you will understand everything yourself.
Good luck with programming on SoloLearn!
https://www.sololearn.com/learn/6898/?ref=app

Answer 3

✔if you Run code on safari then -webkit-filter

<img src='https://api.sololearn.com/Uploads/Avatars/4714357.jpg'>
<style>
img{
-webkit-filter:blur(3px);
filter:blur(3px);
</style>

Answer 4

https://code.sololearn.com/WpbC7wls6zYZ/?ref=app

Answer 5

Min Pyae Sone hi,
for putting anything over anything is called overlaying.
4 ingredients of overlaying are

1. position: relative for container or wrapper div/IMG etc, Ur case image

2. position : absolute for the thing that goes on top, in your case text div

3. z-index : greater than container, for the text, in it case greater than image

4. top, bottom, left, right - set the position for your text over imag

blur is very easy ,

some more discussion here

https://stackoverflow.com/questions/44708432/how-to-blur-an-image-while-showing-text-over-it-hover-with-css

Answer 6

Thanks!

Answer 7

sir How can i edit back ground image width height blur etc...
I want to text on blur image

Answer 8

few more filters to play with , the css for any used filter will be in the bottom

https://code.sololearn.com/WtmaPIKZl5RL/?ref=app
#crd xP