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

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -