Skip navigation
adamo1986
Currently Being Moderated

Help me please, problem with image transition

Aug 13, 2013 2:40 PM

Hi everybody,

 

For the past few months I have started teaching myself how to use dreamweaver. So far I have had a couple problems my limited knowledge just cant figure out and hoped somebody out there could shed a little light on it.

 

I am currently making a small portfolio site for my girlfriend but am having a few problems with trying to get the gallery the way she wants it. She want a black and white image to transition into colour on mouse over with small textbox to appear on mouseover also. I could not create a simple rollover image as she wanted the fade in and fade out to be slightly slower.

 

The rather simple idea I had for this was to create a div with a background image which would be the colour version. A black and white version imported over the top which transitions out to 0 opacity on mouseover.

 

The problem I have is when the mouse is removed and the mouseout behavior begins to bring the black and white version back. If the mouse is moved over image too quickly there seems to be a conflict between the 2 transitions and it begins to jump a little. You can have a look for yourself:


http://www.emmatait.com/gallery.html

 

I thought maybe if there was some code I could write in that would only make the mouseout behavior begin after all other functions were complete it would solve this but unfortunately I have no idea how to even go about this.

 

Any help would be appreciated.

 

Thanks all

 

Adam

 
Replies
  • Currently Being Moderated
    Aug 13, 2013 5:08 PM   in reply to adamo1986

    Hi Adam,

     

    In my opinion using image swap behaviors is counterproductive.  It makes for slower loading pages and consumes bandwidth.  This can be a problem for mobile device users who often pay for bandwidth usage.

     

    I'm going to show a neat CSS trick for de-saturating color images. When you hover over the images, they turn to color and their opacity increases to 100%.  Click on images to bring up the full size photos with captions.

    http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml

     

     

    Nancy O.


     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points