Home > Article > Web Front-end > Share an HTML+css image enlargement effect code

Share an HTML+css image enlargement effect code

零下一度Original: 2017-05-01 10:28:426151browse

How to enlarge the picture, the editor will introduce an example below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.php.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*
{
	margin:0px;
	padding:0px;
}
#pHead
{
	display: block;
    height: 220px;
    overflow: hidden;
    width: 350px;
}
#pHead:hover img 
{
	transform: scale(1.3);
    transition: all 1s ease 0s;
	-webkit-transform: scale(1.3);
	-webkit-transform: all 1s ease 0s;
}
</style>
</head>

<body>
	<p id="pHead">
    	<img class="Tao"src="image/Thomson.jpeg" />
    </p>
</body>
</html>

The above is the detailed content of Share an HTML+css image enlargement effect code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Analyze some associations between native and htmlNext article：Analyze some associations between native and html

See more

Share an HTML+css image enlargement effect code

Related articles