CSS transition fade on hover

Question

I've encountered a problem with CSS transitions. I'm designing a CSS gallery for my portfolio and I need my images to fade in on hover. I've been playing around with this for over an hour and I was hoping someone could point me into the right direction.

Here is a simplified version to it with JSFiddle

Solution 1

I recommend you to use an unordered list for your image gallery.

You should use my code unless you want the image to gain instantly 50% opacity after you hover out. You will have a smoother transition.

#photos li {
    opacity: .5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

#photos li:hover {
    opacity: 1;
}

Solution 2

This will do the trick

.gallery-item
{
  opacity:1;
}

.gallery-item:hover
{
  opacity:0;
  transition: opacity .2s ease-out;
  -moz-transition: opacity .2s ease-out;
  -webkit-transition: opacity .2s ease-out;
  -o-transition: opacity .2s ease-out;
}

Comments

[giannis christofakis]

You forgot to place the seconds unit measurement on the -moz-transition

[Matt]

It was having opacity set on the non-:hover element that caused my problem.

[SerKnight]

Also this will snap back at 0.0 speed when you release the hover