zoukankan      html  css  js  c++  java
  • 一个文字在一个图片上水平居中,并且悬浮变大特效

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;

    }

    img {
    transition: all.5s;
    -webkit-transition: all.5s;
    -moz-transition: all.5s;
    -ms-transition: all.5s;
    -o-transition: all.5s;
    transform: scale(1);

    }

    img:hover {
    transform: scale(1.05);
    }

    .box {
    position: relative;
    310px;
    height: 130px;

    }

    span {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    background-color: red;
    }
    </style>
    </head>

    <body>


    <div class="box">
    <img src="./img/renzheng-2.jpg" alt="">
    <span>文字</span>
    </div> 

    </body>

    </html>
  • 相关阅读:
    断点调试
    内部类
    继承2
    继承
    构造函数
    方法
    二维数组
    HTML 一
    使用mySQL与数据库进行交互(一)
    使用mySQL与数据库进行交互(二)
  • 原文地址:https://www.cnblogs.com/mmjoy/p/9695008.html
Copyright © 2011-2022 走看看