How to fade into gallery thumbnail effect on hover

scotthunter

Hello,

I currently have a CSS block on my homepage for my gallery thumbnails, which changes the inner box colour/opacity on rollover.

http://www.scotthunterphotography.com/

I am nearly there, but I would like to add a half a second fade effect to the existing code on rollover, if this is possible? The effect I am trying to achieve is here: http://www.alexnail.com/gallery/

The existing code for the CSS block is here:

.sm-user-ui .sm-tile-info .sm-tile-title {
font-size: 120%;
font-weight: bold;
min-height: auto;
padding: 40px 0;
color: rgba( 255, 255, 255, 1 );
background: rgba( 0, 0, 0, 0.5 );
}

.sm-user-ui .sm-tile-info .sm-tile-title:hover {
    color: rgba( 255, 255, 255, 0.8 );
    background: rgba( 255, 255, 255, 0.1 );
    }

.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content .sm-tile-info,
.sm-user-ui .sm-tiles-infohover-hide .sm-tile-content:hover .sm-tile-info {
opacity: 0.8;
}

Hikin' Mike

Looks like you've changed your code. If you still need that delay, add this to your CSS and change the timing to suit.

.sm-user-ui .sm-tiles-infohover-show .sm-tile-info, 
.sm-user-ui .sm-tiles-infohover-hide .sm-tile-info {
    -webkit-transition: all 0.5s ease-out;
       -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
         -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;  
    }