CSS3 Zooming example

Write code here

J | B | A

<!DOCTYPE html>
<html>
	<head>
		<title>Demo</title>
	</head>
<body>
	<style>
        ul.myGallery li {
            float: left;
            list-style: none;
            border: 1px solid #c0c0c0;
            -webkit-transition: -webkit-transform 0.5s ease-in-out;
            -moz-transition: -moz-transform 0.5s ease-in-out;
            transition: transform 0.5s ease-in-out;
        }

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>

<ul class="myGallery">
        <li>
            <img src="http://techfunda.com/HTPictures/Generics/1-635716259621984414.jpg" /></li>
        <li>
            <image src = "http://techfunda.com/HTPictures/Generics/1-635724500240488175.gif" /></li>
        <li>
            <img src="http://techfunda.com/HTPictures/Generics/1-635716259621984414.jpg" /></li>
        <li>
            <image src = "http://techfunda.com/HTPictures/Generics/1-635724500240488175.gif" /></li>
    </ul>
<br/><br/><br/><br/><br/>
<br/><br/><br/>
<h3>This is the Example for the Smooth Zooming.</h3>
</body>
</html>

Note: We DO NOT save your trial code in our database.

CSS3 > Zooming

Write code here

Output