Bharat Negi Bharat Negi - 1 month ago 11
HTML Question

image scale animation not working with css

I have a problem: When i add an image in

css
background so image stop scale animation.

Follows HTML Code

<ul class="memberList">
<li class="mem1"><a href="#"><b></b></a> <span>Member Name 1</span></li>
</ul>


For full view, please check the Jsfiddle

Answer

It's doable, you just have to set a background-size in .memberList li.mem1 a b. Also you may want to move the transition inside that in order to zoom out too. Check this out, it's your code with these two small changes (change the size from 205px 226px to values that suit your scale preferences):

.memberList{ float: left; margin: 10px 0 0 15px; padding: 0; width: 1200px; position: absolute; top:0; left: 0;}
.memberList li{ float: left; margin: 0 7px; text-align: center; list-style: none;}
.memberList li a{display: block; border: solid 1px #f0f0f0; overflow: hidden; height: 144px; width: 130px; margin-bottom: 15px;}
.memberList li a b {display: block; height: 144px; width: 130px;}
.memberList li.mem1 a b{
	background-image: url(https://s13.postimg.org/y77inuf47/member_pic1.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size:205px 226px;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease; 
}
.memberList li:hover a b{
	background-size: 100% 100%; /* width and height, can be %, px or whatever. */
}
<ul class="memberList">
  <li class="mem1"><a href="#"><b></b></a> <span>Member Name 1</span></li>
</ul>

Comments