这是一个圆形边框做的效果
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); } /*案例 结束*/
效果:
初始效果
鼠标移动上的效果
发现第二张图片有变化了吗
还没有人抢沙发呢~