0

I have an image in css like this:

background-image: url(https://imgur.com/lTpbsD4);

I am trying to apply a 'fisheye' effect to this image, so it can look like this:

https://support.usa.canon.com/library/attachments/ServiceWareImages/LDImages/SolutionAnswer/General_Digital_Camera/fisheye%20example.jpg

I found this codepen that accomplished something similar, though not quite what I have in mind. I want to just distort the image, but this codepen only works on hover, and does not use the css 'background-image()'

https://codepen.io/jOlga/pen/KyQMQW

How would I go to accomplish this using either css or js?

Joao Moita
  • 31
  • 2
  • This answer may assist... https://stackoverflow.com/a/32467496/1533592 – dale landry Apr 12 '23 at 22:50
  • What's stopping you from replacing the image url, placing the cursor exactly where you want it and making a screen capture? Save it as a static image, without the JS for making the effect dynamic, if that's all you need. – tao Apr 13 '23 at 01:13
  • @tao the issue is I am trying to make a rotating earth, using css animations for it. The earth itself rotates by using a map, but it just looks very flat because it literally is flat. By using a fisheye effect I can make it appear to be round. Because it is something that is constantly changing, a screencapture wont do the trick – Joao Moita Apr 13 '23 at 04:14
  • 1
    In that case you have an XY problem. The codepen you linked won't help, unless you have a way of detecting every possible change in the map (which, in my estimation creates a bigger problem than having a fisheye effect). You're better off using [fisheye.js](http://ericleong.me/fisheye.js/) which is capable of creating a permanent distortion of a specified page area. – tao Apr 13 '23 at 05:32

0 Answers0