Hover effect for "SINGLE PHOTO" content box on homepage

phaserbeam

I have added 5 photos to my homepage that link directly to different galleries.

See: phaserbeam.smugmug.com

Is there an easy way using CSS to add a hover effect to these 5 photos so the visitor get a visual feedback about which photo he is going to click on?

Just like in the SM gallery style when moving the mouse over the thumbs.

Any help appreciated.

aschendel

you might have some success with this CSS - i put it together initially for the gallery pages but it should be pretty easy to configure to just apply to your homepage images.

li .sm-tile {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

li .sm-tile:hover {
  opacity: 0.5;
}

Andy

phaserbeam

aschendel wrote: »

you might have some success with this CSS - i put it together initially for the gallery pages but it should be pretty easy to configure to just apply to your homepage images.

Thanks! I modified it a little bit so it only works for the limit-height-elements and it seem to work

.sm-tile .sm-tile-content .sm-tile-limit-height {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.sm-tile:hover .sm-tile-content .sm-tile-limit-height {
  opacity: 0.7;
}

JodiCrandellPhotography

Wow! Very nice touch... thank you!