javascript - how to show the effect of the focus with the border radius..i have tried . i want it to zoom out -
insert image inside tag , run it may full understand clearly
.focus { -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; -ms-transition: 1s ease; } .focus:hover { border: 70px solid #000; border-radius: 50%; }
<div class="focus pic"><img src=" " ></div>
first set default values of element on should when zooming out.
second set transition effect 0 in :hover
condition.
.focus { -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; -ms-transition: 1s ease; border: 0px solid #000; border-radius: 0; } .focus:hover { -webkit-transition: 0s ease; -moz-transition: 0s ease; -o-transition: 0s ease; -ms-transition: 0s ease; border: 70px solid #000; border-radius: 50%; }
<div class="focus pic"> <img src="http://www.w3schools.com/html/pic_mountain.jpg"> </div>
Comments
Post a Comment