How to cerate Magnifying Glass using CSS?

Posted by  Ankita Pandey
 2727  View(s)
Rate this:
Hi Everyone!

I'm creating webpage in HTML. I want to create Magnifying Glass using css for my webpage. Can you help me?

Thanks in advance
  1. Re: How to cerate Magnifying Glass using CSS?

    Hi Ankita!

    You can try this css

    <Style type="text/css">
    #magnifying-glass { font-size: 10em; /* This controls the size. */ display: inline-block; width: 0.4em; height: 0.4em; border: 0.1em solid #CC33CC; position: relative; border-radius: 0.35em; }
    #magnifying-glass::before { content: ""; display: inline-block; position: absolute; right: -0.25em; bottom: -0.1em; border-width: 0; background: #CC33CC; width: 0.35em; height: 0.08em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }

    You get more css shapes from given below link