css鼠标放上图片变大

简介: css鼠标放上图片变大
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标放上图片变大</title>
        <style type="text/css">
            div{
                width: 414px;
                height: 240px;
                border: #000 solid 1px;
                margin: 50px auto;
                overflow: hidden;
            }
            div img{
        width: 414px;
        height: 240px;
                cursor: pointer;
                transition: all 0.6s;
            }
            div img:hover{
                transform: scale(1.4);
            }
        </style>
    </head>
    <body>
        <div>
            <img src="http://tp.jxmlove.top/stf.png" />
        </div>
    </body>
</html>

相关文章
|
23天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
49 1
|
27天前
|
前端开发
CSS中如何实现鼠标悬停效果?
CSS中如何实现鼠标悬停效果?
33 0
|
1月前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
36 0
|
3月前
|
前端开发
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
|
3月前
|
前端开发
如何使用 CSS object-fit 进行图片的缩放和裁剪
如何使用 CSS object-fit 进行图片的缩放和裁剪
83 0
如何使用 CSS object-fit 进行图片的缩放和裁剪
|
3月前
|
前端开发 UED
HTML和CSS动画:为鼠标经过效果注入灵魂!附源码!
HTML和CSS动画:为鼠标经过效果注入灵魂!附源码!
|
3月前
|
前端开发
导航栏也疯狂:CSS动画让导航栏活起来,跟随鼠标滑动!
导航栏也疯狂:CSS动画让导航栏活起来,跟随鼠标滑动!
|
3月前
|
前端开发
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
|
3月前
|
前端开发
CSS中如何实现鼠标悬停效果?
CSS中如何实现鼠标悬停效果?
51 0
|
4月前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
66 0