Scale and box shadow in CSS3

How to scale and apply box shadow effect in CSS3?

By using Scale we can change the size of the element based on its width and height ratio. Box shadow is used to create a drop shadow beneath the element.

<style>
        ul.myGallery li {
            float: left;
            list-style: none;
            border: 1px solid #c0c0c0;
        }

            ul.myGallery li:hover {
                -webkit-transform: scale(1.5);
                -moz-transform: scale(1.5);
                -o-transform: scale(1.5);
                transform: scale(1.5);
                -webkit-box-shadow: 4px 4px 10px red;
                -moz-box-shadow: 4px 4px 10px red;
                box-shadow: 4px 4px 10px red;
            }
</style>
    
<body>    
    <div style="background-color: #efefef; padding: 50px; height: 150px;">
        <ul class="myGallery">
            <li>
                <img src="../dotnetfunda.png" /></li>
            <li>
                <img src="../itfunda.gif" /></li>
            <li>
                <img src="../dotnetfunda.png" /></li>
            <li>
                <img src="../itfunda.gif" /></li>
        </ul>
    </div>
</body>

In the above code snippet, we have specified scale property that accepts the scale ratio as parameter. Accordingly it changes the height and width of the element.

OUTPUT