Related
I have a hover effect on div.overlay, so when hovered, it will fade out and back in. However, if I hover the <span> or <h2>, background does not change, and I'm struggling finding how to make anything hovered within the <a> to have the same effect. Any ideas?
.homepage-box {
position: relative;
width: 300px;
height: 300px;
}
.homepage-box h2 {
margin-bottom: 0;
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 14%;
color: #ffffff;
font-size: 2em;
z-index: 3;
}
.homepage-box span.button {
position: absolute;
left: 0;
right: 0;
top: 50%;
display: inline-block;
text-align: center;
color: #fff;
font-size: 1.3em;
border: 1px solid #fff;
padding: 7px 20px;
font-weight: bold;
margin: 0 30%;
z-index: 3;
}
.homepage-box img {
margin: 0 0 10px 0;
z-index: 1;
}
.homepage-box div.over {
position: absolute;
height: 191px;
width: 100%;
z-index: 2;
background: rgba(0, 0, 0, 0.2);
top: 0;
-webkit-transition: background-color 500ms linear;
-moz-transition: background-color 500ms linear;
-o-transition: background-color 500ms linear;
-ms-transition: background-color 500ms linear;
transition: background-color 500ms linear;
}
.homepage-box div.over:hover,
.homepage-box a:hover ~ div.over,
.homepage-box h2:hover ~ div.over {
background: rgba(0, 0, 0, 0);
}
.homepage-box a {
color: #2B2B2C;
margin: 0 0 15px 0;
display: block;
}
<div class="homepage-box">
<a href="#">
<div class="over"></div>
<h2>Baby Bean Bags</h2>
<span class="button">shop now</span>
<img src="/images/companies/1/baby-beanbags.jpg">
<p>Perfect for a newborn baby & makes a lovely gift to new parents. Cute, safe & well designed baby beanbags.</p>
</a>
</div>
contain the content within the overlay div
.homepage-box {
position: relative;
width: 300px;
height: 300px;
}
.homepage-box h2 {
margin-bottom: 0;
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 14%;
color: #ffffff;
font-size: 2em;
z-index: 3;
}
.homepage-box span.button {
position: absolute;
left: 0;
right: 0;
top: 50%;
display: inline-block;
text-align: center;
color: #fff;
font-size: 1.3em;
border: 1px solid #fff;
padding: 7px 20px;
font-weight: bold;
margin: 0 30%;
z-index: 3;
}
.homepage-box img {
margin: 0 0 10px 0;
z-index: 1;
}
.homepage-box div.over {
position: absolute;
height: 191px;
width: 100%;
z-index: 2;
background: rgba(0, 0, 0, 0.2);
top: 0;
-webkit-transition: background-color 500ms linear;
-moz-transition: background-color 500ms linear;
-o-transition: background-color 500ms linear;
-ms-transition: background-color 500ms linear;
transition: background-color 500ms linear;
}
.homepage-box div.over:hover,
.homepage-box a:hover ~ div.over,
.homepage-box h2:hover ~ div.over {
background: rgba(0, 0, 0, 0);
}
.homepage-box a {
color: #2B2B2C;
margin: 0 0 15px 0;
display: block;
}
<div class="homepage-box">
<a href="#">
<div class="over">
<h2>Baby Bean Bags</h2>
<span class="button">shop now</span>
<img src="/images/companies/1/baby-beanbags.jpg">
<p>Perfect for a newborn baby & makes a lovely gift to new parents. Cute, safe & well designed baby beanbags.</p>
</div>
</a>
</div>
jsfiddle: https://jsfiddle.net/e0u4sow1/
I want to use the following code for an image to link to another page. Right now if I make it a link it doesn't work. I read somewhere I need to add
pointer-events: none;
somewhere in the code. It tried, but it either doesn't work or it works but removes the overlay.
HTML:
<h1>MR Cube</h1>
<div class="media"></div>
<div class="media"><img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" />
<div class="media__body">
<h1>Lees meer</h1>
</div>
</div>
CSS:
.media {
display: inline-block;
position: relative;
vertical-align: top;
}
.media__image { display: block; }
.media__body {
background: rgba(41, 128, 185, 0.7);
bottom: 0;
color: white;
font-size: 1em;
left: 0;
opacity: 0;
overflow: hidden;
padding: 3.75em 3em;
position: absolute;
text-align: center;
top: 0;
right: 0;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.media__body:hover { opacity: 1; }
.media__body:after,
.media__body:before {
border: 1px solid rgba(255, 255, 255, 0.7);
bottom: 1em;
content: '';
left: 1em;
opacity: 0;
position: absolute;
right: 1em;
top: 1em;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: 0.6s 0.2s;
transition: 0.6s 0.2s;
}
.media__body:before {
border-bottom: none;
border-top: none;
left: 2em;
right: 2em;
}
.media__body:after {
border-left: none;
border-right: none;
bottom: 2em;
top: 2em;
}
.media__body:hover:after,
.media__body:hover:before {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.media__body h2 { margin-top: 0; }
.media__body p { margin-bottom: 1.5em; }
move .media__body inside a
<a href="http://www.google.nl/">
<img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" />
<div class="media__body">
<h1>Lees meer</h1>
</div>
</a>
check this fiddle
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.image-container{
width:200px;
position:relative;
overflow: hidden;
}
.image-container img {
max-width: 100%;
height: auto;
display: block; /* added this */
}
.image-container a {
position:absolute;
color: #fff;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 0;
z-index:2;
}
.image-container .image-overlay{
opacity:0;
position:absolute;
color: #fff;
background: rgba(141, 178, 215, 0.77);
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 0;
text-align:center;
font-size:40px;
line-height: 200px; /* added this */
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
z-index:1;
}
.image-container:hover .image-overlay{
opacity:1;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="image-container">
<div class="image-overlay">
<i class="fa fa-search"></i>
</div>
<img src="https://placehold.it/350x350">
</div>
Although JQuery has not been tagged, this is what you could have done using it:
$(".media__body").click(function(){
window.location = "http://www.google.com/";
});
Here is a Demo
Here is the solution, just wrap all tags used for image with <a> tag
Demo
<h1>MR Cube</h1>
<a href="www.google.com" >
<div class="media"></div>
<div class="media"><img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" />
<div class="media__body">
<h1>Lees meer</h1>
</div>
</div>
</a>
I'm attempting to make the Nav li elements align side by side horizontally and not vertically. The Nav li elements also show a list style (bullet points) which should not show. However, after using display: inline-block; & list-style-type: none; my attempt fail?
CSS:
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a{
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: #000000;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
a:focus, a:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
a:active {
color: #484747;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: #545454;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
border-bottom: 0.5px solid rgba(0,0,0,.2);
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.nav {
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
display: inline-block;
background-color: #ffffff;
left:0;
top: 55px;
border-bottom: 0.5px solid rgba(0,0,0,.2);
border-top: 0.5px solid rgba(0,0,0,.2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo{
border-top: 0.5px solid rgba(0,0,0,.2);
padding-top: 40px;
padding-bottom: 40px;
}
#instagram{
display: inline-block;
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #464c4c;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
#instagram:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
.nav > li:hover {
left: 0;
padding-top: 0.6em;
padding-bottom: 1em;
cursor:pointer;
list-style-type: none;
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 50%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/*Panels*/
.panel {
width: 100%;
color: #adadad;
height: 15em;
padding: 7em;
box-sizing: border-box;
background: #ffffff;
border-top: 0.5px solid rgba(0,0,0,.2);
text-align: center;
}
#panel1 {
background: #b8b8b8;
height: 30em;
}
.links{
color: #adadad;
}
/*----/----Panels*/
/*promo video scroll*/
#hero, section {
padding: 150px;
}
#scroll {
color: white;
font-size: 26px;
line-height: 26px;
cursor: pointer;
position: absolute;
left:50%;
-webkit-transition: -webkit-transform 0.6s ease;
-moz-transition: -moz-transform 0.6s ease;
transition: transform 0.6s ease;
}
#scroll.clicked {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
#scroll.rotate {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(3180deg);
}
#scroll span {
position: relative;
bottom: -10px;
}
.arrow-bounce {
-webkit-animation: arrow 1s infinite;
-moz-animation: arrow 1s infinite;
-o-animation: arrow 1s infinite;
animation: arrow 1s infinite;
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
#-webkit-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#-moz-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
/*----/----promo video scroll*/
/*contact panel*/
* {
font-family: "helvetica";
font-weight: normal;
font-size: 1em;
}
#wrapper {
width: 100%;
padding: 30px 20px;
text-align: center;
box-sizing: border-box;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"] {
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #e6e8eb;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"]:hover {
color: #464c4c;
cursor:pointer;
transition: color 0.5s ease;
}
.module {
width: 100%;
margin: 1rem auto;
padding: 1rem;
}
.module fieldset {
overflow: hidden;
border: none;
}
.module fieldset [type="text"] {
display: block;
margin: 0 auto;
width: 80%;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.2);
line-height: 20px;
margin-bottom: 10px;
font-size: 1em;
background: transparent;
color: rgba(0,0,0,.4);
width: 50%;
padding: 0.5rem;
}
.single {
height: 25px;
}
.module fieldset textarea {
display: block;
width: 100%;
padding: 1rem;
height: 125px;
}
/*----/----contact form*/
/*social panel*/
.followcontainer {
text-align: center;
background: #ededed;
}
.follow {
left: 50%;
display: inline-block;
width: 175px;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
}
.followcopywright {
left: 50%;
display: inline-block;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
}
/*social icons*/
.social-buttons {
height: 45px;
font-size: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
background: #ededed;
}
.social-button {
display: inline-block;
background-color: #ededed;
width: 45px;
height: 45px;
line-height: 45px;
margin: 0 10px;
text-align: center;
position: relative;
overflow: hidden;
opacity: .99;
border-radius: 50%;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
content: '';
background-color: #000;
width: 120%;
height: 120%;
position: absolute;
top: 90%;
left: -110%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button .fa {
font-size: 38px;
vertical-align: middle;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button.facebook:before {
background-color: #3B5998;
}
.social-button.facebook .fa {
color: #3B5998;
}
.social-button.twitter:before {
background-color: #3CF;
}
.social-button.twitter .fa {
color: #3CF;
}
.social-button.google:before {
background-color: #DC4A38;
}
.social-button.google .fa {
color: #DC4A38;
}
.social-button.dribbble:before {
background-color: #F26798;
}
.social-button.dribbble .fa {
color: #F26798;
}
.social-button.skype:before {
background-color: #00AFF0;
}
.social-button.skype .fa {
color: #00AFF0;
}
.social-button:focus:before, .social-button:hover:before {
top: -10%;
left: -10%;
}
.social-button:focus .fa, .social-button:hover .fa {
color: #fff;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/*----/----social panel*/
/*footer*/
footer {
float: left;
display: inline-block;
text-align: center;
background: 232,232,232,0;
border-top: 1px solid rgba(0,0,0,.2);
}
/*----/----footer*/
/****landscape****/
#media (min-width: 850px) {
}
/*----/----Landscape*/
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path style="fill:#545454;" d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
<div class="nav">
<div id="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">About</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
</li><input type='submit' id="instagram" value="instagram"> </li>
</ul>
</div>
</div>
</div>
</div>
<div class="maincontent">
<div class="panel" id="panel1">
<div id="hero">
</div>
<div id="scroll">
<span class="arrow-bounce">↓</span>
</div>
</div>
<div class="panel" id="panel2">
<div class="inner">
Work Title 1
</div>
</div>
<div class="panel" id="panel3">
<div class="inner">
Work Title 2
</div>
</div>
<div class="panel" id="panel4">
<div class="inner">
Work Title 3
</div>
</div>
<div class="panel" id="panel5">
<div class="inner">
Work Title 4
</div>
</div>
<div class="panel" id="panel6">
<div class="inner">
Work Title 5
</div>
</div>
<div class="panel" id="panel7">
<div class="inner">
Work Title 6
</div>
</div>
<div id='wrapper'>
<input type='submit' value='Contact' id="changetext">
<div class='module' id='measure'>
<fieldset>
<legend></legend>
<input class="single" type='text' placeholder='Name' />
<input class="single" type='text' placeholder='Email' />
<input class="single" type='text' placeholder='Phone' />
<textarea class="message" type='text' placeholder='Message' ></textarea>
<input type='submit' id="send">
</fieldset>
</div>
</div>
<div class="followcontainer">
<div class="follow"> <p>I'd love to hear from you.</p>Drop me a line at #email.com.Boost my ego with a Facebook like.And please stalk me on Instagram #instagram.</div>
</div>
<div class="social-buttons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-dribbble"></i>
<i class="fa fa-skype"></i>
</div>
<div class="followcontainer">
<div class="followcopywright">© Copywright 2015</div>
</div>
When displaying li items inline, you must set the CSS style to the li directly, not to the whole list.
Example:
.nav li{
display: inline-block;
}
I have placed a border-top in the CSS for #navpromo, however the border line will not display at full 100% width and is aligning to the right with space to the left of the page instead no matter what I try?
CSS:
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a{
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: #000000;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
a:focus, a:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
a:active {
color: #484747;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: #545454;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
border-bottom: 0.5px solid rgba(0,0,0,.2);
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.nav {
position: fixed;
width: 100%;
text-align: center;
display: inline;
background-color: #ffffff;
left: 0;
top: 39px;
border-bottom: 0.5px solid rgba(0,0,0,.2);
border-top: 0.5px solid rgba(0,0,0,.2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav > li {
left: 0;
padding-top: 70px;
padding-bottom: 70px;
display: inline-block;
padding-right: 60px;
color: #545454;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo{
border-top: 0.5px solid rgba(0,0,0,.2);
padding-top: 40px;
padding-bottom: 40px;
}
#instagram{
display: inline-block;
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #464c4c;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
#instagram:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
.nav > li:hover {
left: 0;
padding-top: 0.6em;
padding-bottom: 1em;
cursor:pointer;
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 50%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/*Panels*/
.panel {
width: 100%;
color: #adadad;
height: 15em;
padding: 7em;
box-sizing: border-box;
background: #ffffff;
border-top: 0.5px solid rgba(0,0,0,.2);
text-align: center;
}
#panel1 {
background: #b8b8b8;
height: 30em;
}
.links{
color: #adadad;
}
/*----/----Panels*/
/*promo video scroll*/
#hero, section {
padding: 150px;
}
#scroll {
color: white;
font-size: 26px;
line-height: 26px;
cursor: pointer;
position: absolute;
left:50%;
-webkit-transition: -webkit-transform 0.6s ease;
-moz-transition: -moz-transform 0.6s ease;
transition: transform 0.6s ease;
}
#scroll.clicked {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
#scroll.rotate {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(3180deg);
}
#scroll span {
position: relative;
bottom: -10px;
}
.arrow-bounce {
-webkit-animation: arrow 1s infinite;
-moz-animation: arrow 1s infinite;
-o-animation: arrow 1s infinite;
animation: arrow 1s infinite;
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
#-webkit-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#-moz-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
/*----/----promo video scroll*/
/*contact panel*/
* {
font-family: "helvetica";
font-weight: normal;
font-size: 1em;
}
#wrapper {
width: 100%;
padding: 30px 20px;
text-align: center;
box-sizing: border-box;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"] {
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #e6e8eb;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"]:hover {
color: #464c4c;
cursor:pointer;
transition: color 0.5s ease;
}
.module {
width: 100%;
margin: 1rem auto;
padding: 1rem;
}
.module fieldset {
overflow: hidden;
border: none;
}
.module fieldset [type="text"] {
display: block;
margin: 0 auto;
width: 80%;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.2);
line-height: 20px;
margin-bottom: 10px;
font-size: 1em;
background: transparent;
color: rgba(0,0,0,.4);
width: 50%;
padding: 0.5rem;
}
.single {
height: 25px;
}
.module fieldset textarea {
display: block;
width: 100%;
padding: 1rem;
height: 125px;
}
/*----/----contact form*/
/*social panel*/
.followcontainer {
text-align: center;
background: #ededed;
}
.follow {
left: 50%;
display: inline-block;
width: 175px;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
}
.followcopywright {
left: 50%;
display: inline-block;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
}
/*social icons*/
.social-buttons {
height: 45px;
font-size: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
background: #ededed;
}
.social-button {
display: inline-block;
background-color: #ededed;
width: 45px;
height: 45px;
line-height: 45px;
margin: 0 10px;
text-align: center;
position: relative;
overflow: hidden;
opacity: .99;
border-radius: 50%;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
content: '';
background-color: #000;
width: 120%;
height: 120%;
position: absolute;
top: 90%;
left: -110%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button .fa {
font-size: 38px;
vertical-align: middle;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button.facebook:before {
background-color: #3B5998;
}
.social-button.facebook .fa {
color: #3B5998;
}
.social-button.twitter:before {
background-color: #3CF;
}
.social-button.twitter .fa {
color: #3CF;
}
.social-button.google:before {
background-color: #DC4A38;
}
.social-button.google .fa {
color: #DC4A38;
}
.social-button.dribbble:before {
background-color: #F26798;
}
.social-button.dribbble .fa {
color: #F26798;
}
.social-button.skype:before {
background-color: #00AFF0;
}
.social-button.skype .fa {
color: #00AFF0;
}
.social-button:focus:before, .social-button:hover:before {
top: -10%;
left: -10%;
}
.social-button:focus .fa, .social-button:hover .fa {
color: #fff;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/*----/----social panel*/
/*footer*/
footer {
float: left;
display: inline-block;
text-align: center;
background: 232,232,232,0;
border-top: 1px solid rgba(0,0,0,.2);
}
/*----/----footer*/
/****landscape****/
#media (min-width: 850px) {
}
/*----/----Landscape*/
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path style="fill:#545454;" d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<div id="navpromo">
<li class="seemore">Want to see more? Check out my instagram!</li>
</li><input type='submit' id="instagram" value="instagram"> </li>
</div>
</ul>
</div>
</div>
<div class="maincontent">
<div class="panel" id="panel1">
<div id="hero">
</div>
<div id="scroll">
<span class="arrow-bounce">↓</span>
</div>
</div>
<div class="panel" id="panel2">
<div class="inner">
Work Title 1
</div>
</div>
<div class="panel" id="panel3">
<div class="inner">
Work Title 2
</div>
</div>
<div class="panel" id="panel4">
<div class="inner">
Work Title 3
</div>
</div>
<div class="panel" id="panel5">
<div class="inner">
Work Title 4
</div>
</div>
<div class="panel" id="panel6">
<div class="inner">
Work Title 5
</div>
</div>
<div class="panel" id="panel7">
<div class="inner">
Work Title 6
</div>
</div>
<div id='wrapper'>
<input type='submit' value='Contact' id="changetext">
<div class='module' id='measure'>
<fieldset>
<legend></legend>
<input class="single" type='text' placeholder='Name' />
<input class="single" type='text' placeholder='Email' />
<input class="single" type='text' placeholder='Phone' />
<textarea class="message" type='text' placeholder='Message' ></textarea>
<input type='submit' id="send">
</fieldset>
</div>
</div>
<div class="followcontainer">
<div class="follow"> <p>I'd love to hear from you.</p>Drop me a line at #email.com.Boost my ego with a Facebook like.And please stalk me on Instagram #instagram.</div>
</div>
<div class="social-buttons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-dribbble"></i>
<i class="fa fa-skype"></i>
</div>
<div class="followcontainer">
<div class="followcopywright">© Copywright 2015</div>
</div>
Change the following:
CSS:
.nav {
position: fixed;
width: 100%;
text-align: center;
display: inline;
background-color: #ffffff;
left:-40px;
top: 39px;
border-bottom: 0.5px solid rgba(0,0,0,.2);
border-top: 0.5px solid rgba(0,0,0,.2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
clear:both;
}
.nav > li:last-child{
width:100%;
display:block;
}
HTML
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
</li><input type='submit' id="instagram" value="instagram"> </li></ul>
</div>
</li>
</ul>
You can also remove the padding from the ul.nav by adding the following style to the .nav class.
padding-left:0;
All ul elements have a default padding.
I have created div called "footer" it appears always at the bottom when the page loads and goes up when scrolling down. Right now I am trying to position 2x text fields using col-6-lg(bootstrap), they should be under the "footer" and visible after scrolling.
body{
background-image: url("../img/bg.png");
background-size: cover;
background-color: #01383b;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
#content {
background: #D0E5FF;
padding: 20px;
color: #00214B;
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 1.8;
}
#footer {
opacity: 0.8;
filter: alpha(opacity=40);
background: rgb(14, 122, 128);
line-height: 2;
text-align: center;
color: #042E64;
font-size: 30px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #00214B
}
#button1{
margin-top: 15px;
}
#button2{
margin-top: 15px;
margin-left: 95px;
}
.cd-container {
width: 90%;
max-width: 768px;
margin: 2em auto;
}
.cd-container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #3cd8e1 url(../img/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #3cd8e1;
opacity: 1;
}
#media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
#media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
.content{
font-family: 'Open Sans';
color: #fff;
}
<div id="footer">
<div class="container">
<div class="col-lg-8 col-lg-offset-2 text-center">
<input type="image" src="img/true.png" alt="Submit" width="78" height="78" id="button1">
<input type="image" src="img/false.png" alt="Submit" width="78" height="78" id="button2">
</div>
<div class="col-lg-4 pull-right">
Top
</div>
</div>
</div>
<div class="container">
<div class="col-lg-6 pull-left text-center">
<h1>Да, това е!</h1>
</div>
<div class="col-lg-6 pull-left text-center">
<h1>Не, това е Lorem Ipsum</h1>
</div>
</div>
So here is the possible solution.
You can wrap both boxes (footer and under-footer container) into, let's call it: footer-wrap.
Then, set .footer-wrap {position: absolute;bottom: 0;width: 100%;}
And remove positioning classes for #footer from your styles.
/* #footer {
position: absolute;
bottom: 0;
width: 100%;
}*/
Set:
.footer-wrap {
position: absolute;
bottom: 0;
width: 100%;
}
Here is a demo: https://jsfiddle.net/xvwqt9a0/
Also here is a demo with your style and your html: https://jsfiddle.net/xvwqt9a0/1/