Coming soon - Get a detailed view of why an account is flagged as spam!
view details

This post has been de-listed

It is no longer included in search results and normal feeds (front page, hot posts, subreddit posts, etc). It remains visible only via the author's post history.

2
Different methods for revealing button links at the bottom of posts
Post Body

Here are some cool examples of bringing in the bottom links on posts.

Features always shows comment link and nsfw tag and shows all on mobile devices.

Note these are not 100% production ready, you will likely need to make some adjustments for things like approve/remove/ignore .pretty-button, slide up staggered would need more children calls for moderators, and slide pulse up needs other vendor prefixes. For my subs I also use (min-device-width) instead of (min-width) to better catch only browsers that don't have hover support.


Check out the examples on Codepen and let me know if you have any other cool ideas!


/**************\
|* Uncover Up *|
\**************/
@media(min-width: 767px) {
    .listing-page .entry .buttons { height: 14px; }
    .listing-page .entry .buttons > *:not(.first) {
      overflow: hidden;
      max-height: 0;
      transition: max-height .3s ease-out;
    }
    .listing-page .entry:hover .buttons > *:not(.first) { max-height: 14px; }
    .listing-page .entry .buttons > .first { float: left; }

    .nsfw-stamp { max-height: 14px !important; }
}

/***************\
|* Slide Right *|
\***************/
@media(min-width: 767px) {
    .listing-page .entry .buttons > *:not(.first) {
      transform: translateX(-900px);
      transition: transform .3s ease-in-out;
    }
    .listing-page .entry:hover .buttons > *:not(.first) { transform: translateX(0); }

    .nsfw-stamp { transform: translateX(0) !important; }
}

/***********\
|* Fade In *|
\***********/
@media(min-width: 767px) {
    .listing-page .entry .buttons > *:not(.first) {
      opacity: 0;
      transition: opacity .3s ease-in;
    }
    .listing-page .entry:hover .buttons > *:not(.first) { opacity: 1; }

    .nsfw-stamp { opacity: 1 !important; }
}

/**********************\
|* Slide Up Staggered *|
\**********************/
@media(min-width: 767px) {
    .listing-page .entry .buttons > *:not(.first) {
      transform: translateY(100%);
      transition: transform .3s ease-in-out;
    }
    .listing-page .entry:hover .buttons > *:not(.first) { transform: translateY(0); }
    .listing-page .entry:hover .buttons :nth-child(2) { transition-delay: 0.0s; }
    .listing-page .entry:hover .buttons :nth-child(3) { transition-delay: 0.05s; }
    .listing-page .entry:hover .buttons :nth-child(4) { transition-delay: 0.1s; }
    .listing-page .entry:hover .buttons :nth-child(5) { transition-delay: 0.15s; }
    .listing-page .entry:hover .buttons :nth-child(6) { transition-delay: 0.2s; }
    .listing-page .entry:hover .buttons :nth-child(7) { transition-delay: 0.25s; }
    .listing-page .entry:hover .buttons :nth-child(8) { transition-delay: 0.3s; }
    .listing-page .entry:hover .buttons :nth-child(9) { transition-delay: 0.35s; }
    .listing-page .entry:hover .buttons :nth-child(10) { transition-delay: 0.4s; }
    .listing-page .entry .buttons :nth-child(2) { transition-delay: 0.4s; }
    .listing-page .entry .buttons :nth-child(3) { transition-delay: 0.35s; }
    .listing-page .entry .buttons :nth-child(4) { transition-delay: 0.3s; }
    .listing-page .entry .buttons :nth-child(5) { transition-delay: 0.25s; }
    .listing-page .entry .buttons :nth-child(6) { transition-delay: 0.2s; }
    .listing-page .entry .buttons :nth-child(7) { transition-delay: 0.15s; }
    .listing-page .entry .buttons :nth-child(8) { transition-delay: 0.1s; }
    .listing-page .entry .buttons :nth-child(9) { transition-delay: 0.05s; }
    .listing-page .entry .buttons :nth-child(10) { transition-delay: 0.0s; }

    .nsfw-stamp { transform: translateY(0) !important; }
}

/*********************************\
|*         Slide Pulse Up        *|
|*  Forked from: Justin Aguilar  *|
|*  justinaguilar.com/animations *|
\*********************************/
@media(min-width: 767px) {
    .listing-page .entry .buttons > *:not(.first) {
      transform: translateY(100%) scaleX(1);
    }
    .listing-page .entry:hover .buttons > *:not(.first) {
        -webkit-animation-name: slideExpandUp;
                animation-name: slideExpandUp;
        -webkit-animation-duration: 1.6s;
                animation-duration: 1.6s;   
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
    @-webkit-keyframes slideExpandUp {
        0%  { -webkit-transform: translateY(100%) scaleX(1); }
        30% { -webkit-transform: translateY(-8%) scaleX(1); }   
        40% { -webkit-transform: translateY(2%) scaleX(1); }
        50% { -webkit-transform: translateY(0%) scaleX(1.1); }
        60% { -webkit-transform: translateY(0%) scaleX(0.9); }
        70% { -webkit-transform: translateY(0%) scaleX(1.05); }         
        80% { -webkit-transform: translateY(0%) scaleX(0.95); }
        90% { -webkit-transform: translateY(0%) scaleX(1.02); } 
        100%{ -webkit-transform: translateY(0%) scaleX(1); }
    }
    @keyframes slideExpandUp {
        0%  { transform: translateY(100%) scaleX(1); }
        30% { transform: translateY(-8%) scaleX(1); }   
        40% { transform: translateY(2%) scaleX(1); }
        50% { transform: translateY(0%) scaleX(1.1); }
        60% { transform: translateY(0%) scaleX(0.9); }
        70% { transform: translateY(0%) scaleX(1.05); }         
        80% { transform: translateY(0%) scaleX(0.95); }
        90% { transform: translateY(0%) scaleX(1.02); } 
        100%{ transform: translateY(0%) scaleX(1); }
    }

    .nsfw-stamp { transform: translateY(0) scaleX(1) !important; }
}

Author
Account Strength
100%
Account Age
10 years
Verified Email
Yes
Verified Flair
No
Total Karma
6,491
Link Karma
2,073
Comment Karma
3,737
Profile updated: 1 week ago
Posts updated: 10 months ago

Subreddit

Post Details

We try to extract some basic information from the post title. This is not always successful or accurate, please use your best judgement and compare these values to the post title and body for confirmation.
Posted
10 years ago