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.
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; }
}
Subreddit
Post Details
- Posted
- 10 years ago
- Reddit URL
- View post on reddit.com
- External URL
- reddit.com/r/reddithax/c...