Develop Reference

How to add/remove animations on mobile devices? html/css

Is there a way that uses media queries and you can delete the animation for the mobile device but keep the animation for other devices like desktop, or laptop? The same also applies with if you want to add an animation for mobile but not have it on any other device such as laptop or computer. Can you use media queries for this?
For example:
I want to add this animation only on mobile devices
function show() {
setTimeout(
function() {
document.getElementById('discord-shoutout').classList.add('online');
},
200
);
}
function reset() {
hide();
setTimeout(show, 1500);
}
function hide() {
document.getElementById('discord-shoutout').classList.remove('online');
}
show();
html,
body {
background: #e9e9e9;
width: 100%;
height: 100%;
text-align: center;
line-height: 1.1;
}
.reset-button {
font: 400 11px "Open Sans";
line-height: 1;
background: transparent;
border-radius: 10px;
border: 2px solid #7289da;
color: #7289da;
font-size: 1em;
padding: 0.5em 0.8em;
cursor: pointer;
}
.reset-button:hover {
background: #7289da;
color: #fff;
}
.discord-shoutout * {
font-family: "Open Sans", sans-serif;
box-sizing: border-box;
}
.discord-shoutout {
position: fixed;
bottom: 2em;
right: 1em;
width: 300px;
z-index: 100;
text-align: left;
transition: 1s ease;
visibility: hidden;
opacity: 0;
transform: translate(1em, 50px);
filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.15));
}
.discord-shoutout:hover {
filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.25));
}
.discord-shoutout.online {
opacity: 1;
transform: translate(0, 0);
visibility: visible;
}
.discord-shoutout:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 0;
border-color: transparent #7289da transparent transparent;
position: absolute;
right: 0;
bottom: -25px;
}
.discord-shoutout .shoutout-inner {
color: #fff;
padding: 1em 1.5em 1.5em;
transition: box-shadow 0.3s ease;
background: transparent;
border-radius: 1em/1em;
overflow: hidden;
position: relative;
}
.discord-shoutout .shoutout-inner:after, .discord-shoutout .shoutout-inner:before {
content: "";
border-width: 0;
position: absolute;
box-sizing: border-box;
width: 100%;
background-color: #7289da;
z-index: -1;
}
.discord-shoutout .shoutout-inner:after {
height: 200%;
top: 0;
left: -46px;
transform: rotate(-18deg);
}
.discord-shoutout .shoutout-inner:before {
height: calc(100% - 25px);
right: 0;
top: 0;
}
.discord-shoutout .title {
display: block;
font-size: 1.2em;
margin: 0 0 1em 0;
}
.discord-shoutout p {
font-size: 0.9em;
font-weight: 300;
margin: 0 0 0.6em 0;
}
.discord-shoutout .discord-buttons {
margin-top: 1.4em;
}
.discord-shoutout .discord-button {
padding: 0.6em 1em;
color: white;
text-decoration: none;
background: transparent;
border: 0;
font-size: 0.9em;
cursor: pointer;
}
.discord-shoutout .discord-button.discord-primary {
border: 2px solid #fff;
border-radius: 6px;
}
.discord-shoutout .discord-button.discord-primary:hover {
background: #fff;
color: #7289da;
}
.discord-shoutout .discord-button.discord-secondary {
color: #fff;
}
.discord-shoutout .discord-button.discord-secondary:hover {
text-decoration: underline;
}
.discord-shoutout img {
position: absolute;
right: 1em;
top: 1em;
height: 1.4em;
}
<button class="reset-button" onclick="reset()">reset</button>
<div id="discord-shoutout" class="discord-shoutout">
<div class="shoutout-inner">
<img src="https://discordapp.com/assets/93608abbd20d90c13004925014a9fd01.svg">
<span class="title">Hey there!</span>
<p>
Fancy having a chat?
</p>
<p>
We're currently online on Discord!
</p>
<div class="discord-buttons">
<a class="discord-button discord-primary" href="https://discord.gg/2nrFVCp" target="_blank">Join our server</a>
<button class="discord-button discord-secondary" onclick="hide()">Close</button>
</div>
</div>
</div>
Is there a way to add the above animation only for mobile devices? using either media queries or any other method?

I can think of two ways of doing it. One with media queries and another with javascript. I prefer the media query way. In below code the animation will only work on screen sizes less than 600px. That is it will only work on mobile devices.
Media query way:
You can add the css which toggles the animation inside a media query
CSS:
html,
body {
background: #e9e9e9;
width: 100%;
height: 100%;
text-align: center;
line-height: 1.1;
}
.reset-button {
font: 400 11px "Open Sans";
line-height: 1;
background: transparent;
border-radius: 10px;
border: 2px solid #7289da;
color: #7289da;
font-size: 1em;
padding: 0.5em 0.8em;
cursor: pointer;
}
.reset-button:hover {
background: #7289da;
color: #fff;
}
.discord-shoutout * {
font-family: "Open Sans", sans-serif;
box-sizing: border-box;
}
.discord-shoutout {
position: fixed;
bottom: 2em;
right: 1em;
width: 300px;
z-index: 100;
text-align: left;
transition: 1s ease;
visibility: hidden;
opacity: 0;
transform: translate(1em, 50px);
filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.15));
}
.discord-shoutout:hover {
filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.25));
}
.discord-shoutout:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 0;
border-color: transparent #7289da transparent transparent;
position: absolute;
right: 0;
bottom: -25px;
}
.discord-shoutout .shoutout-inner {
color: #fff;
padding: 1em 1.5em 1.5em;
transition: box-shadow 0.3s ease;
background: transparent;
border-radius: 1em/1em;
overflow: hidden;
position: relative;
}
.discord-shoutout .shoutout-inner:after, .discord-shoutout .shoutout-inner:before {
content: "";
border-width: 0;
position: absolute;
box-sizing: border-box;
width: 100%;
background-color: #7289da;
z-index: -1;
}
.discord-shoutout .shoutout-inner:after {
height: 200%;
top: 0;
left: -46px;
transform: rotate(-18deg);
}
.discord-shoutout .shoutout-inner:before {
height: calc(100% - 25px);
right: 0;
top: 0;
}
.discord-shoutout .title {
display: block;
font-size: 1.2em;
margin: 0 0 1em 0;
}
.discord-shoutout p {
font-size: 0.9em;
font-weight: 300;
margin: 0 0 0.6em 0;
}
.discord-shoutout .discord-buttons {
margin-top: 1.4em;
}
.discord-shoutout .discord-button {
padding: 0.6em 1em;
color: white;
text-decoration: none;
background: transparent;
border: 0;
font-size: 0.9em;
cursor: pointer;
}
.discord-shoutout .discord-button.discord-primary {
border: 2px solid #fff;
border-radius: 6px;
}
.discord-shoutout .discord-button.discord-primary:hover {
background: #fff;
color: #7289da;
}
.discord-shoutout .discord-button.discord-secondary {
color: #fff;
}
.discord-shoutout .discord-button.discord-secondary:hover {
text-decoration: underline;
}
.discord-shoutout img {
position: absolute;
right: 1em;
top: 1em;
height: 1.4em;
}
#media only screen and (max-width: 600px) {
.discord-shoutout.online {
opacity: 1;
transform: translate(0, 0);
visibility: visible;
}
}
Javascript way: You can also check window width in js and toggle the animation class accordingly.
JS:
function show() {
if(window.innerWidth < 600){
setTimeout(
function() {
document.getElementById('discord-shoutout').classList.add('online');
},
200
);
}
}
function reset() {
hide();
setTimeout(show, 1500);
}
function hide() {
document.getElementById('discord-shoutout').classList.remove('online');
}
show();

you can use this for disable all animations on only mobiles devices you can ajust the media query size for your purposes....
#media screen and (max-width: 768px) {
*, *:before, *:after {
/*CSS transitions*/
transition-property: none !important;
/*CSS transforms*/
transform: none !important;
/*CSS animations*/
animation: none !important;
}

Aligning a chat bubble content to the right

I have a bootstrap card that is adding chat bubbles to a list group. I want to align the content to the right so the bubble isn't just in the middle. I tried using align=right and wrapping that div tag in:
$("#messages").append($("<div align=right><div class=bubble-r><li></div></div><br />").text(msg));
but that didn't work. What am I missing?
$("#messages").append(
$("<div class=bubble-r><li></div><br />").text(msg)
);
} else {
$("#messages").append(
$("<div class=bubble><li></div> <br />").text(msg)
);
}
});
}
render() {
return (
<ul id="messages">
<div />
</ul>
);
}
CSS
.chat {
color: white;
}
.chat .dropdown-toggle:after {
content: none;
}
.userbutton {
size: 2px;
}
.card {
color: black;
}
.card-text {
overflow: auto;
height: 10rem;
}
.onlinebar {
position: "absolute";
color: red;
bottom: 0;
left: 0;
}
#chatbtn {
color: black;
width: 200px;
margin-left: 5px;
margin-top: 0px;
}
.chatcollapse {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#chatHeader {
margin: 0px;
padding: 0px;
}
#chatcard {
width: 2rem;
}
.card-deck .card {
max-width: calc(25% + 80px);
}
.card-body {
padding: 0px;
margin: 0px;
}
.bubble-r {
align-items: flex-end;
position: relative;
background: #0072c6;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
color: white;
border-radius: 6px;
}
.bubble-r:after,
.bubble-r:before {
left: 100%; /*change this from right to left*/
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble-r:after {
border-color: rgba(200, 200, 204, 0);
border-left-color: #0072c6; /*change this from right to left */
border-width: 8px;
margin-top: -3px;
}
.bubble-r:before {
border-color: rgba(200, 204, 0, 0);
border-left-color: #0072c6; /*change this from right to left*/
border-width: 8px;
margin-top: -3px;
}
.bubble {
position: relative;
background: #cad5d7;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
border-radius: 6px;
}
.bubble:after,
.bubble:before {
right: 100%;
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble:after {
border-color: rgba(255, 255, 204, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}
.bubble:before {
border-color: rgba(255, 204, 0, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}

Responsiveness to Mobile in CSS

Im trying to make my bottom sheet responsive to mobile and desktop. you can see in laptop the bottom sheet when you click new topic it works all fine:
But then lets see it in a mobile version(On a regular Iphone 5):
You can see its beyond terrible... My HTML For that view is(Minimized):
<div class="toolbar_new_topic" ng-if="authDataDesc!=null">
<md-button id="NEW_TOPIC_BUTTON" ng-click="showNewTopic($event)">
<ng-md-icon icon="add_box" style="fill: white" size="20" id="add_icon"></ng-md-icon>
<span id="text_new_topic" color="white">Create a New Topic</span>
</md-button>
</div>
And my CSS Is:
.listdemoListControls md-divider {
margin-top: 0;
margin-bottom: 0
}
.listdemoListControls md-list {
padding-top: 0
}
.listdemoListControls md-list-item ._md-list-item-inner>._md-list-item-inner>p,
.listdemoListControls md-list-item ._md-list-item-inner>p,
.listdemoListControls md-list-item>._md-list-item-inner>p,
.listdemoListControls md-list-item>p {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
body,
html {
background: #DDD
}
#MD-ICON-1 {
position: relative;
left: -40px;
bottom: -23px
}
.avatar_custom {
width: 20px;
height: 20px
}
.avatar_creator {
border-radius: 50%;
position: relative;
height: 30px;
top: 10px;
width: 30px
}
.toolbar_new_topic {
display: flex;
flex-direction: row;
justify-content: flex-end
}
#NEW_TOPIC_BUTTON {
background-color: #81C784;
font-weight: 700;
margin-right: 50px
}
span.views_icon {
position: relative;
top: 5px
}
span.replies_list.md-secondary.ng-binding {
position: relative;
left: -55px;
top: 18px
}
.user-avatar-wrapper {
padding: 0;
margin: 0;
height: 50px;
width: 50px;
border-radius: 50%;
min-width: 50px;
display: flex;
align-items: center
}
.tags a,
.tags li {
height: 24px;
line-height: 24px;
font-size: 11px
}
.search_autocomplete,
input#input-0 {
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
text-decoration: inherit
}
.tags {
margin: 0;
padding: 0;
position: absolute;
right: 24px;
bottom: -12px;
list-style: none
}
.tags li {
float: left;
position: relative
}
.tags a:after,
.tags a:before {
content: "";
position: absolute;
float: left
}
.tags a {
float: left;
margin-left: 20px;
padding: 0 10px 0 12px;
background: #0089e0;
color: #fff;
text-decoration: none;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px
}
.tags a:before {
top: 0;
left: -12px;
width: 0;
height: 0;
border-color: transparent #0089e0 transparent transparent;
border-style: solid;
border-width: 12px 12px 12px 0
}
.tags a:after {
top: 10px;
left: 0;
width: 4px;
height: 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: #fff;
-moz-box-shadow: -1px -1px 2px #004977;
-webkit-box-shadow: -1px -1px 2px #004977;
box-shadow: -1px -1px 2px #004977
}
.tags a:hover {
background: #555
}
.tags a:hover:before {
border-color: transparent #555 transparent transparent
}
span.last_activity.ng-binding {
position: relative;
right: 129px
}
ul.tags {
position: absolute;
right: 1138px;
bottom: 20px
}
span.bookmark_icon {
position: relative;
right: 130px;
top: 1px
}
.user-avatar {
height: 50px;
width: 50px;
border-radius: 50%
}
md-list.ng-scope.md-whiteframe-24dp.flex-sm-55.flex-gt-sm-45.flex-gt-md-45 {
position: relative;
top: 25px;
left: 25px;
background: #EF5350
}
md-list-item.md-3-line.ng-scope.md-clickable {
background-color: #EF5350
}
.tags a {
position: relative;
left: 800px
}
Im currently Programming this website here so if you go there we can fix this problem real quick:
https://ide.c9.io/amanuel2/ng-fourm
Thanks for your time!

You need to use media queries in your CSS to target mobile device sizes. For example:
#media (max-width: 420px) {
/* your styles here */
}

Webpage doesn't adjust to any screen height automatically

I had an issue with the blank space below the footer. I've managed to solve this by adding a jQuery sticky footer as the CSS methods doesn't work for me.
However, I do have a problem with main content of the webpage. If I adjust .bg-photo's height, it will affect how low or high the footer's placement will go.
Any content within .bg-photo will not affect the footer's placement at all.
I'm thinking it could be my HTML or CSS that's doing this sort of issue. Although, I'm not sure.
What I want is that the page automatically adjust to any screen's height and the user doesn't have to scroll down to view just the footer.
Here's the webpage:
http://planet.nu/dev/test/index.html
Here's the jsFiddle:
https://jsfiddle.net/mqfrnjaa/
And the codes if you need to view them right away.
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $(".footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
html, body {
height: 100%;
}
*{
margin: 0;
}
body {
background: #fff;
min-height: 600px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #393c3d;
line-height: 22px;
}
#fw_header {
margin: 0 auto;
position: relative;
width: 980px;
}
#fw_header ul {
list-style-type: none;
}
.forums #fw_header {
margin-bottom: 0;
}
#fw_header ul {
padding-left: 12px;
padding-top: 6px;
}
#fw_header li {
float: left;
padding: 0 3px;
}
#fw_header li a {
padding: 0 8px;
}
#fw_header li a:hover {
border-bottom: 5px solid #829AC6;
text-decoration: none;
}
#fw_header li a.active {
border-bottom: 5px solid #4E6CA3;
}
#fw_header ul.submenu li a.active,
#fw_header ul.subsubmenu li a.active {
border-bottom: 5px solid #829AC6;
}
#fw_header ul.submenu,
#fw_header ul.subsubmenu {
margin-top: 1em;
padding-top: 0;
}
#fw_header ul.submenu_usage {
padding-left: 32px;
}
#fw_header ul.submenu_plugins {
padding-left: 20px;
}
#fw_header ul.submenu_development {
padding-left: 23px;
}
#fw_header ul.submenu_extras {
padding-left: 14px;
}
#fw_header ul.submenu_testing {
padding-left: 480px;
}
#fw_header ul.submenu_styling {
padding-left: 80px;
}
#fw_header ul.subsubmenu {
padding-left: 120px;
}
#fw_header ul.submenu li,
#fw_header ul.subsubmenu li {
font-size: 80%;
}
#fw_header {
font-size: 16px;
}
#fw_header a {
color: #4E6CA3 !important;
}
#fw_header h1 {
border-bottom: medium none;
color: black;
font-size: 2em;
line-height: 1.45em;
margin-top: 32px;
vertical-align: middle;
}
#fw_header h1 img {
margin-top: -5px;
vertical-align: middle;
}
#fw_header h1 a {
color: black !important;
}
#fw_header h1 a:hover {
text-decoration: none;
}
#header_options {
position: absolute;
right: 150px;
top: -32px;
width: 495px;
}
#header_options .option {
float: left;
padding: 12px 0;
text-align: center;
width: 165px;
}
#header_options a:hover {
text-decoration: none;
}
#header_options .option:hover {
background-color: #F5F7FA;
}
#header_options div.option img {
margin-right: 7px;
vertical-align: middle;
}
#header_options .option table {
margin: 0 auto;
}
#header_options .option table td {} #header_options #options_search {
padding: 7px 0;
width: 495px;
}
#header_options #options_download {} #options_search input[type="text"] {
height: 20px;
width: 350px;
}
#header_download {
background: url("../images/dl_button_220.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 0;
text-align: center;
top: -8px;
width: 220px;
}
#header_donate {
background: url("../images/donate_button.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 220px;
text-align: center;
top: -8px;
width: 220px;
}
#header_download a,
#header_donate a {
color: white;
}
#header_download a:hover,
#header_donate a:hover {
text-decoration: none;
}
#dontate_wrapper {
background-color: #FCFCFC;
border: 1px dotted #A5A5A5;
color: #555555;
font-size: 0.8em;
margin: 0 0 1.5em;
padding: 5px;
text-align: center;
}
#header_advert {
background-color: white;
height: 200px;
overflow: visible;
position: absolute;
right: 0;
top: -32px;
width: 150px;
}
body .adpacks {} body .one .bsa_it_ad {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #999999;
margin: 0;
text-align: left;
}
body .one .bsa_it_ad:hover {
background-color: #F5F7FA;
color: black;
}
body .one .bsa_it_ad .bsa_it_i {
display: block;
float: none;
font-size: 11px !important;
margin: 0;
padding: 0;
text-align: center;
}
body .one .bsa_it_ad .bsa_it_d {
font-size: 11px !important;
}
body .one .bsa_it_ad .bsa_it_i img {
border: medium none;
padding: 0;
}
body .one .bsa_it_ad .bsa_it_t {
padding: 6px 0 0;
}
body .one .bsa_it_p {
display: none;
}
.one .bsa_it_ad {
color: #F5F7FA;
padding: 4px 0 0 !important;
}
body #bsap_aplink,
body #bsap_aplink:hover {
display: block;
font-size: 10px;
left: 104px;
position: absolute;
text-decoration: none;
top: 45px;
transform: rotate(90deg);
width: 100px;
}
.css_small {
font-size: 75%;
line-height: 1.45em;
}
.css_vsmall {
font-size: 65%;
line-height: 1.45em;
}
#dt_example #container {
margin: 64px auto 30px !important;
}
.header {
width: 100%;
background: rgba(255, 255, 255, 0.6);
color: #034e7c;
text-align: center;
padding: 20px 0;
height: 115px;
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D73000', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}
.header img.logo {
height: 105px;
}
.header ul.breadcrumb li a {
font-family: 'Open Sans';
font-size: 23px;
color: #4a4a4a
}
.header ul.log-in {
list-style-type: none;
display: inline;
float: right;
margin-top: 55px;
margin-right: 40px;
}
.header ul li {
display: inline;
color: red;
margin-right: 35px;
}
.header ul.log-in li,
.header ul.log-in li a {
display: inline;
font-size: 19px;
color: red;
text-decoration: none
}
.header .dateButton,
.dateButton {
width: 300px;
height: 45px;
background: #e63308;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e63308), color-stop(100%, #db3304));
background: -webkit-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -o-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -ms-linear-gradient(top, #e63308 0%, #db3304 100%);
background: linear-gradient(to bottom, #e63308 0%, #db3304 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e63308', endColorstr='#db3304', GradientType=0);
float: right;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-right: 70px;
text-align: center;
cursor: pointer;
margin-top: -8px;
}
.header .dateButton a,
.dateButton a {
height: 30px;
vertical-align: middle;
line-height: 45px;
font-weight: bold;
color: #f0f0f0;
font-size: 23px;
}
.header .dateButton img,
.dateButton img {
padding-right: 5px
}
.footer {
width: 100%;
background: #FFF;
text-align: center;
height: 40px;
}
.footer p {
color: #4a4a4a;
font-family: 'Open Sans', sans-serif;
padding: 30px 0;
}
.footer p a {
color: #9fcf64;
}
.navigation {
min-width: 1300px;
width: 100%;
border-top: solid 1px #d6d6d6;
border-bottom: solid 1px #d6d6d6;
height: 60px;
background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 10%, #ededed 100%);
}
.navigation ul.breadcrumb {
padding: 0px;
margin: 0;
margin-left: 50px;
margin-top: 15px;
margin-right: 0px;
width: 1000px;
}
.navigation ul li {
list-style-type: none;
}
.navigation ul li a {
color: #4a4a4a;
text-decoration: none;
font-weight: bold;
font-size: 23px;
float: left;
margin-right: 10px;
}
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 3px 0 3px 5.2px;
border-color: transparent transparent transparent #4a4a4a;
float: left;
margin-top: 8px;
margin-right: 10px;
}
.top-section {
height: 100px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #393c3d;
line-height: 22px;
}
.bg-photo{
background:url(http://planet.nu/dev/test/images/bg.jpg);
background-size: cover;
height: 75%;
text-align: center;
}
.bg-photo:before{
content: '';
display: inline-block;
vertical-align: middle;
margin-right: -0.25em;
}
.loginText{
font-size: 16px;
}
#createCampaignButton {
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
font-size: 18px;
/* font-weight: bold; */
color: #fff;
background: #8bbd3a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
table{
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.9);
}
h1{
color: #4a4a4a;
font-size: 48px;
}
table th{
color: #666666;
padding-top: 10px;
text-align: left;
padding-left: 15px;
}
table td {
padding-left: 15px;
}
table td input{
padding-left: 5px;
height: 30px;
font-size: 22px;
margin-bottom: 20px;
width: 100%;
}
tbody{
width: 95%;
display: table;
}
<div class="header">
<div class="top-section">
<img class="logo" src="http://planet.nu/dev/test/images/littleforest_logo.jpg">
</div>
</div>
<div class="bg-photo col-md-12 col-xs-12">
<div class="col-md-6 col-sm-9">
<h1 style="font-size: 35px; text-align:center; color:#FFF;margin:20px 0 0 0">
Welcome to LFi
</h1>
<p style="text-align:center; color: #FFF; font-size: 20px; padding: 28px 0 0 0;">Insight that drives web success</p>
<br>
<form method="post" action="/crawler/LoginServlet">
<table style="width: 40%; padding: 20px 30px; display: inline-block; vertical-align: middle; margin: 30px 0 0 0; background: rgba(255,255,255, 0.9);">
<tbody>
<tr>
<th>
User Name
</th>
</tr>
<tr>
<td>
<input type="text" name="username" class="textInput loginText" placeholder="User Name">
</td>
</tr>
<tr>
<th>
Password
</th>
</tr>
<tr>
<td>
<input type="password" name="password" value="" class="textInput loginText" placeholder="Password">
</td>
</tr>
</tbody>
</table>
<div>
<p class="submit">
<input type="submit" name="commit" class="button" id="createCampaignButton" value="Log in" style="width:260px; display: inline-block; vertical-align: middle; margin: 20px 0 0 0;">
</p>
</div>
</form>
</div>
</div>
<div class="footer col-md-12 col-xs-12">
<p>
Powered by Little Forest a tool that encourages continuous improvement towards web success.
</p>
</div>

What can come in handy in situation like this is css property vh.
Depends on which browsers you have to support, but to adjust to height of view port you can do height: 100vh or vmin.
More details on browser support: http://caniuse.com/#feat=viewport-units

You could achieve sticky-footer without any plugins. Here i did "sticky footer and header" only with css. One can add up more content under the form and get assured that the page stretches right down while content stays above the footer - here.
/**sticky-footer layout**/
body {
min-height: 500px;
}
.header,
#main,
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header {
height:120px !important;
overflow:hidden;
background:#ffffff !important;
position:relative;
z-index: 10;
padding:0 !important;
opacity:0.9;
}
.footer {
height:100px !important;
background:#ffffff !important;
overflow:hidden;
opacity:0.9;
padding:0 !important;
}
#main {
min-height:100%;
margin:-120px 0 -100px;
height:auto !important;
}
#main:after,
#main:before {
content:"";
display:block !important;
margin:0;
}
#main:before {
height:120px;
}
#main:after {
height:100px;
}
However, you might not like the fact that your bg container .bg-photo#main lays underneath header and footer (which i made opaque on purpose to demonstrate, how the blocks are positioned), thus cutting bits of your leaves background.
You would instinctively wish to transfer the background to an inner immediate div inside the main section. I've sketched this eventuality as well, however since it's uses vh units,
min-height: calc( 100vh - 220px);
it might not work in all browsers, so beware, i also used calc to subtract the header and the footer. I hope it'll work reliably for you.

Transition icon when hover

I've this code
.pictos {
display: block;
height: 70px;
margin: 160px 0 30px;
padding: 0 17%;
width: 100%;
}
.pictos > div {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
border: 1px solid #fff;
border-radius: 50%;
display: table-row;
float: left;
height: 70px;
width: 70px;
margin: 0 0 0 50px;
}
.pictos a.standard:hover,
.pictos a.standard:focus {
background: url("http://s11.postimg.org/91k4hiqe7/standard.png") no-repeat scroll 50% -39px rgba(120, 182, 55, 1);
}
.pictos > div a {
border-radius: 50%;
display: inline-block;
height: 45px;
margin: 12px;
text-decoration: none;
text-indent: -9999px;
transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
width: 45px;
}
/* Hide this */
.pictos > div .standard-hover {
border-radius: 50%;
display: inline-block;
height: 45px;
margin: 12px;
text-decoration: none;
text-indent: -9999px;
transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
width: 45px;
}
.pictos > div:first-child {} .pictos a.standard {
background: url("http://s11.postimg.org/91k4hiqe7/standard.png") no-repeat scroll 50% 50% rgba(255, 255, 255, 1);
}
.pictos a.standard:hover span,
.pictos a.standard span:hover,
.pictos a.standard span:focus,
.pictos a.standard:focus span {
display: block;
opacity: 1;
}
.pictos a span::after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #78b637 rgba(120, 182, 55, 0) rgba(120, 182, 55, 0);
border-image: none;
border-style: solid;
border-width: 6px;
content: " ";
height: 0;
left: 50%;
margin-left: -6px;
pointer-events: none;
position: absolute;
top: 100%;
width: 0;
}
.pictos a span {
background: none repeat scroll 0 0 #78b637;
border: medium none;
border-radius: 9px;
bottom: 50px;
color: #efefef;
font-family: "Montserrat-Regular", sans-serif;
font-size: 13px;
padding: 5px 0;
position: relative;
right: 77px;
text-align: center;
text-decoration: none;
text-indent: 0;
text-transform: uppercase;
width: 200px;
}
<div class="pictos">
<div>
<a href="#" class="standard">
<span>standard</span>
</a>
<a href="#" class="standard-hover">
<span>standard</span>
</a>
</div>
</div>
What I want is when you hover the link, an white icon phone (like this http://s30.postimg.org/3l9qho5h9/standard_hover.png) appears from the bottom to the green circle. It happens when the first icon is moving to the top.
Thanks for the help.

Like this?
.pictos {
display: block;
height: 70px;
margin: 160px 0 30px;
padding: 0 17%;
width: 100%;
}
.pictos > div {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
border: 1px solid #fff;
border-radius: 50%;
display: table-row;
float: left;
height: 70px;
width: 70px;
margin: 0 0 0 50px;
}
/* new stuff: */
.pictos a.standard {
background-repeat: no-repeat;
background-color: rgba(255, 255, 255, 1);
/* set two background images: */
background-image: url("http://s11.postimg.org/91k4hiqe7/standard.png"),
url(http://s30.postimg.org/3l9qho5h9/standard_hover.png);
/* set positioning for them both individually: */
background-position: 50% 50%, 50% 39px;
}
.pictos a.standard:hover,
.pictos a.standard:focus {
/* when hovering, change background-color and both of the background-positions: */
background-color: rgba(120, 182, 55, 1);
background-position: 50% -39px, 50% 50%;
}
/* end of new stuff, removed some other unnecessary rules also*/
.pictos > div a {
border-radius: 50%;
display: inline-block;
height: 45px;
margin: 12px;
text-decoration: none;
text-indent: -9999px;
transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
width: 45px;
position:relative;
}
.pictos a.standard:hover span,
.pictos a.standard span:hover,
.pictos a.standard span:focus,
.pictos a.standard:focus span {
display: block;
opacity: 1;
}
.pictos a span::after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #78b637 rgba(120, 182, 55, 0) rgba(120, 182, 55, 0);
border-image: none;
border-style: solid;
border-width: 6px;
content: " ";
height: 0;
left: 50%;
margin-left: -6px;
pointer-events: none;
position: absolute;
top: 100%;
width: 0;
}
.pictos a span {
background: none repeat scroll 0 0 #78b637;
border: medium none;
border-radius: 9px;
color: #efefef;
font-family: "Montserrat-Regular", sans-serif;
font-size: 13px;
padding: 5px 0;
position: relative;
text-align: center;
text-decoration: none;
text-indent: 0;
text-transform: uppercase;
width: 200px;
position:absolute;
top:-50px;
left:-77px;
opacity:0;
height:16px;
transition:opacity .4s;
}
<div class="pictos">
<div>
<a href="#" class="standard">
<span>standard</span>
</a>
</div>
</div>

I have started with a different approach, using pseudo elements to contain your icons, and animated them on hover.
I have also added an <a> tag to allow you to have text as well
.wrap {
display: inline-block;
padding: 5px;
background: lightgray;
border-radius: 10px;
}
.phone {
height: 50px;
width: 50px;
border-radius: 50%;
border: 10px solid gray;
position: relative;
overflow: hidden;
transition: all 0.6s;
margin: 0 auto;
}
.phone:before,
.phone:after {
content: "";
position: absolute;
top: 0;
left: 0;
background: url(http://s11.postimg.org/91k4hiqe7/standard.png) no-repeat center;
background-size: 60%;
height: 50px;
width: 50px;
transition: all 0.6s;
}
.wrap:hover .phone:before {
top: -100%;
}
.phone:after {
top: 100%;
background: url(http://s30.postimg.org/3l9qho5h9/standard_hover.png) no-repeat center;
background-size: 60%;
}
.wrap:hover .phone:after {
top: 0;
}
.wrap:hover .phone {
background: green;
}
a, span {
transition: all 0.6s;
text-decoration: none;
display: inline-block;
width: 80px;
height: 20px;
border-radius: 10px;
color: white;
text-align: center;
position: relative;
margin: 0 auto;
margin-bottom:10px;
}
a span {
background: green;
opacity: 0;
display: inline-block;
}
.wrap:hover span {
opacity: 1;
}
span:before {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
height: 10px;
width: 10px;
background: inherit;
}
<div class="wrap">
<a href="#"><span>Standard</span>
<div class="phone"></div>
</a>
</div>

Try this:
button {
-webkit-appearance: none;
-moz-appearance: none;
font-family: helvetica;
position: relative;
display: inline-block;
width: 60px;
height: 60px;
border: 1px solid lightgrey;
background-color: white;
border-radius: 50px;
border-width: 10px;
transition: all 1s;
overflow:hidden;
}
button:before{
content:'☎';
color: black;
font-size: 40px;
position: absolute;
top: -10px;
left: 6px;
transition: top 1s;
}
button:hover{
background-color: green;
}
button:hover:before{
top:-100px;
}
button:after{
content:'☎';
color: white;
font-size: 40px;
position: absolute;
top: 50px;
left: 7px;
transition: top 1s;
}
button:hover:after{
top: -10px;
}
<button />