CODEWITHSUNDEEP
htmlcss
S.M_Emamian
S.M_Emamian

Reputation: 17383

Zooming in and out the same time at two images in css

I would like to zooming in and out in the same time with two images . like below link :

http://css3.bradshawenterprises.com/cfimg/#cfimg4

I've copied its styles but not work :

  <style>
  #cf4 {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }
  #cf4 img {
    position:absolute;
    left:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

  #cf4 img.top {
    -webkit-transform:scale(0,0);
    -moz-transform:scale(0,0);
    -o-transform:scale(0,0);
    transform:scale(0,0);
    opacity:0;

  }

  #cf4:hover img.top, #cf4.hover_effect img.top {
    opacity:1;
    -webkit-transform:scale(1,1);
    -webkit-transform-origin: top right;
    -moz-transform:scale(1,1);
    -moz-transform-origin: top right;
    -o-transform:scale(1,1);
    -o-transform-origin: top right;
    transform:scale(1,1);
    transform-origin: top right;
  }

  #cf4:hover img.bottom, #cf4.hover_effect img.bottom {
    -webkit-transform:scale(0,0);
    -webkit-transform-origin: bottom left;
    -moz-transform:scale(0,0);
    -moz-transform-origin: bottom left;
    -o-transform:scale(0,0);
    -o-transform-origin: bottom left;
    transform:scale(0,0);
    transform-origin: bottom left;
  }

  </style>
  <div id="cf4" class="hover">
    <img class="bottom shadow" src="one.jpg">
    <img class="top shadow" src="two.jpg">
  </div>

I am a beginner in the CSS.

Upvotes: 0

Views: 321

Answers (1)

Santosh
Santosh

Reputation: 141

Your code snippet is correct. May be your images are not linking correctly. According to your code, images should be in same folder where your main index file exists.

And working solution is here. http://jsbin.com/poqeto/2/

check it out. And if you face same problem, then post problem in detail(all code from first line to last line).

Upvotes: 1

Related Questions