Remove blur effect when hovering on top of image preview in dropzone.js

Question

I'm using dropzone.js and I would like to remove the blur effect when I hover on top of my uploaded image preview.

You can observe this behavior directly on the website from dropzone's home page, on the example. https://www.dropzonejs.com/

Thanks guys!

Hey Toby, thanks for your reply. It's not necessary to add the code I think, if you go on the welcome example of dropzone.js, you can directly try there and see the full code with the inspector. — Djodjo, Dec 28 '18 at 10:59

Djodjo · Answer 1 · 2018-12-28T11:44:00.517

1

Found it!

We need to overwrite this class:

.dropzone .dz-preview:hover .dz-image img {
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
  -webkit-filter: blur(8px);
  filter: blur(8px); }

Changing -webkit-filter:none; filter: none;

Thanks

edited Dec 28 '18 at 11:44

answered Dec 28 '18 at 11:38

Djodjo

95
10

score 0 · Answer 2 · answered Dec 27 '18 at 19:52

0

Try using the inspector and check the class that it is giving you that efect, I think it is called dz-preview or dz-details, and change the css to your liking or take down the hover effect by commenting it.

answered Dec 27 '18 at 19:52

Danielle Lpz

312
3
14

Hi, thanks for you answer. I couldn't manage to find the css param to change in the inspector. I can overwrite .dz-image and add color borders for instance, but not remove the blur effect. Any idea? – Djodjo Dec 28 '18 at 10:56
The blur effect is handled by the css, I got to change it. Dropzone has two css, on is basic, there you don't need to change anything, and the other one is Dropzone, there is where you need to find the hover effect. .dropzone .dz-preview.dz-file-preview .dz-image { border-radius: 20px; background: #999; background: linear-gradient(to bottom, #eee, #ddd); //this one } – Danielle Lpz Jan 02 '19 at 18:23

score 0 · Answer 3 · answered Oct 28 '20 at 01:30

You can do it like this

.dropzone .dz-preview:hover .dz-image img {
      -webkit-transform: scale(1.05, 1.05);
      -moz-transform: scale(1.05, 1.05);
      -ms-transform: scale(1.05, 1.05);
      -o-transform: scale(1.05, 1.05);
      transform: scale(1.05, 1.05);
      -webkit-filter: blur(8px);
      filter: blur(0px);
    }

Remove blur effect when hovering on top of image preview in dropzone.js

3 Answers3