How To Draw A Lens Like Circle On Mouseover

August 31, 2023 Post a Comment

I am trying to show a lense like circle on mouseover. i did some coding for it but still not reached a perfect result. any one have any idea how to do this then let me know ? here

Solution 1:

You would have to overlay it with a gradient or image. See this fiddle for a working example: http://jsfiddle.net/V4YaQ/119/

Basically I wrapped the image and added an overlay:

<divclass="thumbnail"><divclass="image-container"><divclass="overlay">&nbsp;</div><imgsrc="http://cdn1.bigcommerce.com/server4800/10d13/products/1134/images/4290/pw72_1__15735.1346792984.320.320.jpg" /></div></div>

Then on the CSS I did this:

.thumbnail:hover.image-container {
  position:relative;    
  top:-25px;
  left:-35px;
  width:140px;
  height:140px;    
  z-index:999;    
  border-radius:75px;
  border:1px solid white;  
  overflow: hidden;
  box-shadow: 2px2px4pxrgba(0, 0, 0, 0.5);
}

.thumbnail:hoverimg {
  position:relative;
  width:140px;
  height:140px;
  display:block;
}

.thumbnail.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(at 25%25%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.0) 35%, rgba(0, 0, 0, 0.5) 100%);
  display: none;
}

.thumbnail:hover.overlay {
  display: block;  
  z-index: 1000;
}

As you will notice, I also changed the border and added a drop shadow, for the effect.

Solution 2:

To achieve the "magnify glass" effect you can follow one of this two codepens.

http://codepen.io/bekerov/pen/kgyvL

http://codepen.io/TheHeat/pen/gdxFG

Or if you dont want the mouse effect, here is your fiddle with the "glass" effect.

http://jsfiddle.net/V4YaQ/121/

The effect is done with box-shadow only.

box-shadow:
    0007pxrgba(255, 255, 255, 0.85),
    007px7pxrgba(0, 0, 0, 0.25), 
    inset 0040px2pxrgba(0, 0, 0, 0.25);

Solution 3:

Sure thing. I did something like this a year ago. I really enjoyed the process to be honest. There's still a problem with the way that the edges of the image are handled due to the way that I've handled getting data from the edges. The canvas element is implemented differently in different browsers and gives a different result. The client didn't want this kind of a solution, so development stopped.

enter image description here

There's a live demo here: http://jsfiddle.net/enhzflep/xsEVb/

You can extract the svg resource, by copying the text in

var svgBase64Str = xxxxxxxxxxxxxx

and unencoding it with an online tool. There's notes for the tutorial I followed to create it there too.

UPDATE EDIT: I remembered that years ago I saw some code that would simulate a magnifying glass floating above a texture. The key difference being that a mag-glass is curved and thus has a varying degree of image displacement across its surface. The first image just shows a constant level of magnification - parallel lines remain parallel.

I just found some code the other day for a more authentic lens effect. It's still not ideal, since it assumes a glass sphere that is intersected with the viewing-plane - not exactly an accurate physical model. It wouldn't be that hard to modify the equation used to calculate the displacement for each pixel. This looks and works well enough for me - even if it does require some extra thinking when playing with the two variables - lens_mag and lens_width.

enter image description here