How to create a functionality like a 'magnifying glass' on a html element/tag

Asked Sep 14 '14 at 17:00

Active Sep 14 '14 at 17:23

Viewed 186 times

I have a simple div (id="one") , when user hover it , I need the div to get bigger and the nested text as well. The idea is getting the feeling of looking through 'magnifying glass'.Can't use plugins, I don't know how to start... Is it possible ?

//css
.one{
height:100px;
width:100px;

}

//html
<div id="one">
Another one bites the dust
</div>

edited Sep 14 '14 at 17:23

asked Sep 14 '14 at 17:00

Damkulul

1,406
2
25
59

did you tried anything? – Mritunjay Sep 14 '14 at 17:01
looked on google didn't found something close to my need.. :( – Damkulul Sep 14 '14 at 17:02
did you try css `:hover`?? Question is overly broad since expected results are unknown – charlietfl Sep 14 '14 at 17:03
hover is not a problem the problem is how to enlarge the text and the div together, maybe it is easy and I didn't notice it.. I don't know where to start :/ – Damkulul Sep 14 '14 at 17:05
@charlietfl - what is overly broad ? – Damkulul Sep 14 '14 at 17:07
@Damkulul: Something like [this](http://jsfiddle.net/55s4jg5z/)? – Syed Ali Taqi Sep 14 '14 at 17:16
@SyedAliTaqi, close but to be specific, when the mouse is hover the div not all the div is enlarge, only the part that the mouse is on, just like 'magnifying glass', is it possible ? – Damkulul Sep 14 '14 at 17:19
clone the same element and add css zoom – Sunand Sep 14 '14 at 17:26
You can use http://stackoverflow.com/q/4912092/1529630 to make an screenshot int a canvas, and then manipulate that. – Oriol Sep 14 '14 at 17:29
1

here's a fiddle to get you started http://jsfiddle.net/6km0z3ak/ I suggest you come back wit a more specific question – andrew Sep 14 '14 at 17:31
Ok thank you, I will start with that.. – Damkulul Sep 15 '14 at 06:54

How to create a functionality like a 'magnifying glass' on a html element/tag

0 Answers0