Zoom div on mouse hover using CSS

Last Reply 2 months ago By dharmendr

Posted 2 months ago

Dear Experts,

I need to know how to zoom Div containt with reflect text displaying on page. Can any one help me?

VB.aspx

an example you can see here:

https://www.the-art-of-web.com/html/jpeg-formats/

On hover zoom the div

https://www.the-art-of-web.com/html/jpeg-formats/

Posted 2 months ago Modified on 2 months ago

Hi Mehram,

Check the below example.

HTML

<style type="text/css">
    #dvZoom:hover
    {
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
        -o-transform: scale(1.4);
        transform: scale(1.4);
        background-color: #FCFAF0;
    }
    #dvZoom
    {
        width: 400px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 10px;
        background-color: #EFF0F1;
    }
</style>
<div align="center">
    <br />
    <div id="dvZoom" align="center">
        <a href="#">Displaying different JPEG formats in your browser</a>
        <br />
        <a href="#">Displaying different JPEG formats in Safari</a>
        <br />
        <a href="#">User Comments</a>
    </div>
</div>

Demo