CSS 实现鼠标移动到图片上图片变大,不改变盒子大小

介绍

实现鼠标经过图片时,图片等比放大,但是图片的父盒子不会改变;主要使用了css的动画来实现。

实现效果

CSS 实现鼠标移动到图片上图片变大,不改变盒子大小_第1张图片

代码

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>
<style>
  .box {
    height: 400px;
    width: 400px;
    border: 10px solid red;
    margin: 100px auto;
    /* 设置overflow: hidden 当放大的时候超出部分隐藏 */
    overflow: hidden;
  }
  .box img {
    display: inline-block;
    height: 100%;
    width: 100%;
    cursor: pointer;
    transition: all .6s;
  }
  .box img:hover {
    transform: scale(1.2);
  }
style>
<body>
  <div class="box">
    <img src="./images.jpg" alt="">
  div>
body>
html>

你可能感兴趣的:(css,css,css3,前端,html)