April 23, 2013

Playing With Images Using CSS

02:04 Posted by Veera Bhadra , No comments
Bottom image Top image

Hover on the image above

This type of transitions we actually see in image gallaries..This has traditionally been done in javascript by iterating over the opacity. Using CSS to make these transitions is much easier and you can easily add that to your site.
  

On Hover 'Opacity Change' with absolute positioning 
First HTML markup ,it is just placing two images and giving class names to each,


<div id="transition">
        <img class="hide" src="image1.jpg"/>
        <img class="unhide" src="image2.jpg"/>
</div>
Then CSS:
       Look at the property of top image on hover ..we make opacity zero.So that the image behind the top image appears ....we have transition of of 1 sec ease-in-out...
Here the important thing is we have to make images position absolute so that  one image hides behind the other.we can give different transitions like this..

Really you don't need to remember all these code ...there  are many online generators that doe this work for us...
Take a look at this CSS transition generator

#transition
 {
     position:relative;
     height:480px;
     width:640px;
     margin:0 auto;
  }

#transition img 

 {    

       height:480px;
       width:640px;
      position:absolute;
      left:0;
     -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
     -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
    }

#transition img.unhide:hover
   {
       opacity:0;
     } 

0 comments:

Post a Comment

Please Enter your comment here......