时间: 2020-09-9|34次围观|0 条评论

这是一个圆形边框做的效果

HTML

<div class="circle-wrapper">  <img src="" ></div>

CSS

.circle-wrapper,.circle-wrapper img {  display: inline-block;  width: 50px;  height: 50px;  border-radius: 50%;  -webkit-transition: .3s;  transition: .3s;}.circle-wrapper {  border: 1px solid #ddd;  position: relative;  overflow: hidden;}.circle-wrapper img {  position: absolute;}.circle-wrapper img:hover {  -webkit-transform: scale(2);  transform: scale(2);}

自己做的案例:

HTML

<div style="position:absolute; top: 0px; left: 0px; width: 100%; min-width: 1200px;">    <!--案例 开始-->        <div id="cases">            <div id="al-list">                <div class="al-items">                <span>WORKS/案例</span>                </div>                <div class="al-right">                                                      <a class="a-item" href="#" rel="all">所有</a>                                                    <a class="a-item" href="#" rel="vi">VI</a>                                                    <a class="a-item" href="#" rel="baozhuang">包装</a>                                                    <a class="a-item" href="#" rel="huace">画册</a>                                                       <a class="a-item" href="#" rel="gongcheng">工程</a>                                                   <a class="a-item" href="#" rel="guanggao">广告</a>                                       </div>            </div>                        <div class="al">                <div class="anli">                    <div class="four-anli">                                           <a href="#"><img src="dt_img/a1.jpg" /></a>                    </div>                    <div class="four-anli">                        <a href="#"><img src="dt_img/a2.jpg"  /></a>                    </div>                    <div class="four-anli" >                        <a href="#"><img src="dt_img/a3.jpg"  /></a>                    </div>                    <div class="four-anli" >                        <a href="#"><img src="dt_img/a4.jpg" /></a>                    </div>                </div>                <div class="anli">                    <div class="four-anli" >                       <a href="#"> <img src="dt_img/a5.jpg"  /></a>                    </div>                    <div class="four-anli" >                       <a href="#"><img src="dt_img/a6.jpg"/></a>                    </div>                    <div class="four-anli" >                       <a href="#"> <img src="dt_img/a7.jpg"/></a>                    </div>                    <div class="four-anli" >                        <a href="#"><img src="dt_img/a8.jpg" /></a>                    </div>                </div>                <div class="anli">                    <div class="four-anli" >                        <a href="#"><img src="dt_img/a9.jpg" /></a>                    </div>                    <div class="four-anli" >                        <a href="#"><img src="dt_img/a10.jpg" /></a>                    </div>                    <div class="four-anli" >                        <a href="#"><img src="dt_img/a11.jpg"  /></a>                    </div>                    <div class="four-anli" >                        <a href="#"><img src="dt_img/a12.jpg"/></a>                    </div>                </div>           </div>        </div></div>

CSS

/*案例 开始*/#cases{    clear:both;    position:relative;    width:100%;    height:800px;    padding:40px 0px;        }#al-list{    width:80%;    margin-left:10%;    position:relative;        height:30px;}.al-items{    float:left;    position:relative;    width:75%;    height:30px;        }    .al-right{    float:left;    position:relative;    margin-right:0px;    width:25%;    height:30px;        }.a-item{    margin-left:10px;    margin-right:10px;        }                    .al{    position:relative;    padding:30px 0}.anli{    width:80%;    position:relative;    margin-left:10%;    margin-top:20px;    height:200px;}.four-anli,.four-anli img{    display:inline-block;        height:200px;    -webkit-transition: .3s;      transition: .3s;    }.four-anli{    width:23%;    position:relative;    float:left;    margin-left:2%;    border:1px solid #000;    right:1%;    overflow:hidden;    }.four-anli img{    width:100%;    position:absolute;   }.four-anli img:hover{    -webkit-transform: scale(2);      transform: scale(2);  }   /*案例 结束*/

效果:

  初始效果

css做鼠标指向图片图片放大但边框不放大插图

  鼠标移动上的效果

css做鼠标指向图片图片放大但边框不放大插图1

发现第二张图片有变化了吗

文章转载于:https://www.cnblogs.com/shenzikun1314/p/6733243.html

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《css做鼠标指向图片图片放大但边框不放大
   

还没有人抢沙发呢~