Cargo home Twitter Devlog

Creating thumbnail hover states

Last Updated: Oct 03, 2014 04:27PM PDT
To create a rollover fade effect on your thumbnails, just add these selectors into your CSS:
 .project_thumb:hover .cardimgcrop img {
    opacity: .7;
}

.cardimgcrop img {
    opacity: 1;

    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}
Some designs have different thumbnail structures. You may need to replace .project_thumb:hover with the selector relevant to that design.
 
SpaceCollective, Voyager, Elena, Trillian:
.project_feed_thumb:hover
 
Feed, ozFeed, Turing, xFeed, nonFeed:
.module:hover
 
Polaris, Callisto
.cardimgcrop img will need to replaced with .thumb_image img 

Sirius, Cassiopeia, Europa:
.thumbnail:hover
.cardimgcrop img will need to be replaced with .thumb_image img
 
 
Note: the animated transition effect will not work in Internet Explorer 9 or below, but the opacity will still change on hover. 


If you wish to have the thumbnail image fade into another image when it is hovered over, target each thumbnail with a background image via your Custom CSS. The ID can be found in the Project Editor, below the Post button:
Direct link   Solo link    PID: 123
Replace 123 in the below example with the PID from your project editor.
#cardthumb_123 {
    background-image: url(http://urltoyourimage.gif); 
}
If you are using Sirius, Polaris, Callisto, Andromeda, Vega, or Cassiopeia, you will need to target #item_123 .thumb_image instead:
#item_123 .thumb_image {
    background-image: url(http://urltoyourimage.gif); 
}
Paste the resulting #cardthumb #item_123 .thumb_image selector into your CSS.

To make your thumbnail image fade completely to the one defined by your CSS, modify the opacity of the hover state to 0. Change the .cardimgcrop img  / .thumb_image img selector so that it uses 0% opacity instead of 70%:
opacity: 0.7                         →    opacity: 0
filter: alpha(opacity=70)            →    filter: alpha(opacity=0)
tickets@cargocollective.com
http://assets2.desk.com/
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete