CSS transition fade on hover

css hover css-transitions
kwh71787 picture kwh71787 · Oct 20, 2012 · Viewed 116.4k times · Source

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

Answer

giannis christofakis picture giannis christofakis · May 2, 2013

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;
}

Related questions

Spin or rotate an image on hover

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :

Read More
Using CSS to transition the fill property of an SVG path on hover

I'm including an SVG image file on my page within an object tag, like this: <object type="image/svg+xml" data="linkto/image.svg"> <!-- fallback image in CSS --> </object> The image in …

Read More
Transition only for the border on hover, but not for background

Here I have some CSS: #image-edges-beneath:hover{ background-color: blue; } #image-edges:hover{ background-color: blue; } #image-edges-beneat:hover:after{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; border: 2px solid #F1…

Read More