Cargo home Twitter Devlog

Placing title over thumbnails

Last Updated: Feb 10, 2017 12:21PM PST
To place your thumbnail title in front of your thumbnails, instead of having them below the thumbnail, start by making sure that you have your thumbnail titles turned through your admin panel → Settings → Display options. Then, find the Design you are using in the list below and make the CSS modifications shown for that Design. If a given selector ( like .thumbnail:hover .thumb_info , among others) doesn't already exist, you'll need to add it into your CSS.


Hyperion
.thumb_info_wrapper {
    cursor: pointer;
    font-size: 18px;
    margin: auto;
    z-index: 9;
    
    opacity: 0;
    
    transition: 0.3s ease all;
}

.thumb_info {
    position: absolute;
    -webkit-flex-flow: column nowrap;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    line-height: 1.5;
    margin: auto;
    
    width: 100%;
    height: 100%;
    
    background: rgba(255,255,255,.8);
    
    padding: 0;
    top: 0px;
    left: 0px;
}


Virgo
.thumb_info {
    position: absolute;
    pointer-events:none;
    z-index: 9;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 18px;
    text-align: center;
    margin: auto;

    opacity: 0;
    z-index: 99;

    -ms-transition: .3s opacity ease-in-out;
    -webkit-transition: .3s opacity ease-in-out;
    transition: .3s opacity ease-in-out;
}

.thumb_info:before {
    background: none;
    content: "";
    display: block;
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 0;
    z-index: -1;
}

.thumbnail .thumb_title {
    color: #000;
    font-size: 16px;
    line-height: 14px;
    letter-spacing: 1px;
    line-height: 1.4;
    text-rendering: optimizeLegibility;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thumbnail:hover .thumb_info {
    opacity: 1;
}


Ikonos
.thumb_info {
    position: absolute;
    background: rgba(0,0,0,0.5);
    text-align: center;

    opacity: 0;
    bottom: 0;
    left: 0px;
    right: 0px;
    top: 0;
    height: 52px;
    margin: auto;
    max-height: 100%;
    overflow: hidden;
        
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 16px;
    cursor: pointer;

    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    z-index: 9;

    width: 100%;

    -ms-transition: .3s opacity ease-in-out;
    -webkit-transition: .3s opacity ease-in-out;
    transition: .3s opacity ease-in-out;    
}


Rosetta
.thumb_info {
    position: absolute;
    pointer-events:none;
    z-index: 9;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 18px;
    text-align: center;
    margin: auto;

    opacity: 0;
    z-index: 99;

    -ms-transition: .3s opacity ease-in-out;
    -webkit-transition: .3s opacity ease-in-out;
    transition: .3s opacity ease-in-out;
}

body.desktop .project_thumb:hover .thumb_info {
    display: block;
    opacity: 1;
}



Runyon
.thumb_info {
    background: #ffffff;
    cursor: pointer;
    opacity: 0;
    line-height: 15px;
    padding: 10px 12px 8px 12px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    margin: auto;
    z-index: 999;    
}


Cassiopeia, Cassini, Copernicus, Europa, Sirius, Betelgeuse
.thumb_title {
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    height: 20px;
    font-size: 14px;
    line-height: 14px;
    z-index: 99;
    position: absolute;

    opacity: 0;

    -webkit-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

.thumbnail:hover .thumb_title{
    opacity: 1;
}


Polaris, Andromeda, CallistoWarholCounterform 2012, Counterform-byday, Counterform-bynight, Landsat, Tesla, Hegel, Kant, Amsterdam, Limelight, Kennedy, Passport, Biblio, Apollo, Manhattan
.thumb_title {
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    height: 20px;
    font-size: 14px;
    line-height: 14px;
    z-index: 99;
    position: absolute;

    opacity: 0;

    -webkit-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

.project_thumb:hover .thumb_title{
    opacity: 1;
}


Turing, nonFeed, ozFeed, xFeed
.thumb_title {
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    height: 20px;
    font-size: 14px;
    line-height: 14px;
    z-index: 99;
    position: absolute;

    opacity: 0;

    -webkit-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

.module:hover .thumb_title{
    opacity: 1;
}


​Elena, Trillian, Voyager, SpaceCollective
 .thumb_title {
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    height: 20px;
    font-size: 14px;
    line-height: 14px;
    z-index: 99;
    position: absolute;

    opacity: 0;

    -webkit-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

.project_feed_thumb .hover .thumb_title{
    opacity: 1;
}
A few notes:
  • This modification adds transitions to the thumbnail titles: these can be edited by removing/changing the "transition" properties.
  • Opacity changes are also added. If you want the titles to always be visible, remove the "opacity: 0" properties.
tickets@cargocollective.com
http://assets1.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