I'm trying to display a "link button" on top of a div (ccontainer) with a background image. It works with a position:absolute but with a position:relative it disappears. I'm wondering why that is as I would like the button to be relative to the div.
My other question is how can I make my "scontent" div come after (below) my "contnent" div. I made my background image transparent and can see the "scontent" grey background color overlapping from behind.
body
{
margin: 0;
padding: 0;
background-color: #999;
}
.header
{
z-index:3;
position:fixed;
background-color:#2B193E;
border:0px solid #ffffff;
height:70px;
left:0;
width:100%;
top:0;
/*Opacity start*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.7;
/*Opacity end*/
}
.hcontainer
{
position: relative;
width:100%;
}
.headingtext
{
color: #ffffff;
text-align: center;
width: 100%;
}
.content
{
z-index:1;
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
padding:0px 0px;
}
.ccontainer
{
height: 100%;
width: 100%;
background:url(my.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
opacity: 0.9;
background-size: 100% 100%;
}
.scontent
{
width: 100%;
height: 2000px;
padding:0px 0px;
}
.sccontainer
{
width: 100%;
height: 100%;
background-color: #444444;
}
.footer
{
z-index:2;
background: #2B193E;
position: fixed;
bottom:0;
height:5em;
width: 100%;
padding: 0em 0em;
/*Opacity start*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.7;
/*Opacity end*/
}
.fcontainer
{
position:relative;
color: #fff;
text-align: center;
top: 40%;
}
.btn
{
position: absolute;
width: 150px;
margin-left:-75px;
left: 50%;
bottom:200px;
display: inline-block;
padding: 5px;
color: #ffffff;
border: 2px solid #fff;
border-radius: 5px;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.btn:hover, .btn:focus, .btn:active {
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}
<body class="body">
<div class="header">
<div class="hcontainer">
<h1 class="headingtext">Poise for victory!</h1>
</div>
</div>
<div class="content">
<div class="ccontainer">
Submit!
</div>
</div>
<div class="scontent">
<div class="sccontainer"></div>
</div>
<footer class="footer">
<div class="fcontainer">
MADE <em class="calluna">in</em> USA
</div>
</footer>
</body>
*Edit: Here are some images illustrating what I mean. The left is how I wish to have the layout and the one on the right is how it is right now. The second image shows how the gray background overlaps the background image from behind. Also I'm using z-index to keep the header and footer over the 2 contents.
http://imgur.com/a/5uHlK
Is this what you wanted?????
Not sure where the grey is coming in also.
If you want to see this correctly click 'full page' after selecting run code snippet. it adjust to the smaller sized box it is in.
body
{
margin: 0;
padding: 0;
background-color: red;
}
.header
{
z-index:3;
position:fixed;
/*Opacity Being done with RGBA */
background-color:RGBA(51, 37, 65, 0.7);
border:0px solid #ffffff;
height:70px;
left:0;
width:100%;
}
.hcontainer
{
position: relative;
width:100%;
}
.headingtext
{
color: #ffffff;
text-align: center;
width: 100%;
}
.content
{
z-index:1;
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
padding:0px 0px;
background-image: url('http://www.liveurlifehere.com/wallpaper/uploads/liveurlifehere-wallpaper1431009496.jpg');
background-size: 100% 100%;
}
.ccontainer
{
height: 100%;
width: 100%;
background:url(my.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
opacity: 0.9;
background-size: 100% 100%;
}
.scontent
{
width: 100%;
height: 2000px;
padding:0px 0px;
}
.sccontainer
{
width: 100%;
height: 100%;
background-color: #444444;
}
.footer
{
z-index:2;
background: #2B193E;
position: fixed;
bottom:0;
height:5em;
width: 100%;
padding: 0em 0em;
/*Opacity start*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.7;
/*Opacity end*/
}
.fcontainer
{
position:relative;
color: #fff;
text-align: center;
top: 40%;
}
.btn
{
position: absolute;
width: 150px;
margin-left:-75px;
left: 50%;
bottom:200px;
display: inline-block;
padding: 5px;
color: #ffffff;
border: 2px solid #fff;
border-radius: 5px;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
z-index: 1;
}
.btn:hover, .btn:focus, .btn:active {
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}
<body class="body">
<div class="header">
<div class="hcontainer">
<h1 class="headingtext">Poise for victory!</h1>
</div>
</div>
<div class="content">
<div class="ccontainer">
Submit!
</div>
</div>
<div class="scontent">
<div class="sccontainer"></div>
</div>
<footer class="footer">
<div class="fcontainer">
MADE <em class="calluna">in</em> USA
</div>
</footer>
</body>
Position absolute, listens to the first parent element, having its position set to something other than it's default value of "static".
So, if you add a position fixed / absolute / relative to the div containing the link, it should allow you to use position absolute in the link element to position it relative to the parent element.
Also, if you use position relative on an element, and not set any position values, for left / top, it does nothing to its behavior.
for more info:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Thanks for the help. The problem was my positioning of the elements. Now I only use the "static" default and relative positioning. This site also helped not only with z-indexing but normal layouts. The html stayed the same but the css is shown below for reference. I also added 100% width and height to the html and body which helped a lot.
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
/* font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
*/
}
.header {
position:fixed;
height:5em;
width:100%;
z-index:3;
background-color:#2B193E;
/*Opacity start*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.7;
/*Opacity end*/
}
.hcontainer {
height: 100%;
}
.headingtext {
position: relative;
top: .5em;
text-align: center;
color: #ffffff;
}
.content {
height: 100%;
background:url(http://www.minimit.com/images/picjumbo.com_IMG_6648.jpg) no-repeat center center fixed;
background-size: 100% 100%;
}
.ccontainer {
border: 1px dashed #669966;
position: relative;
width:40%;
height:40%;
left:30%;
top:50%;
}
.scontent {
height: 1500px;
background:url(mypicture.jpg) no-repeat center center fixed;
opacity: 0.4;
background-size: 100% 100%;
}
.sccontainer {
height: 100%;
width: 100%;
}
.footer {
position: fixed;
height:3em;
width: 100%;
bottom:0em;
z-index:2;
background: #2B193E;
padding: 0em 0em;
/*Opacity start*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.7;
/*Opacity end*/
}
.fcontainer {
position: relative;
top:1em;
text-align: center;
color: #ffffff;
}
/* -----------------------
Single styles
------------------------*/
.infotable {
position: relative;
border: 1px dashed #ffffff;
width: 70%;
margin-bottom:0px;
top: 50%;
left:15%;
}
.btn {
border: 20px dashed #000000;
position: relative;
left:50%;
top:-50%;
width: 150px;
margin-left:-75px;
display: inline-block;
padding: 5px;
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 5px;
text-align: center;
/* outline: none;*/
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.btn:hover, .btn:focus, .btn:active {
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}
Related
I currently doing an Image galery, but I don't like the current design.
I'm looking to use a Modern-Card to show the image and when hover, shows the text linked to that image (either transparent or on a dark background).
Each methode I tried, the image just take the place of the darkbackground and the hover doesn't work anymore.
or disalign to it.
css :
.card {
-background: linear-gradient(to left, #f7ba2b 0%, #ea5358 100%);
width: 190px;
height: 254px;
padding: 5px;
border-radius: 1rem;
overflow: visible;
background: #f7ba2b;
background: var(--background);
position: relative;
z-index: 1;
}
.card::after {
position: absolute;
content: "";
top: 30px;
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
transform: scale(0.8);
filter: blur(25px);
background: #f7ba2b;
background: var(--background);
transition: opacity .5s;
}
.card-info {
\--color: #181818;
background: var(--color);
color: var(--color);
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: visible;
border-radius: .7rem;
}
.card .title {
font-weight: bold;
letter-spacing: .1em;
}
/*Hover*/
.card:hover::after {
opacity: 0;
}
.card:hover .card-info {
color: #f7ba2b;
transition: color 1s;
}
Html :
<div class="card">
<div class="card-info">
<p class="title">Magic Card</p>
</div>
</div>
from this website : https://uiverse.io/alexruix/heavy-elephant-39
Adding a in between the div and adjusting some css
I want to insert the image with a border that isn't overlapping the image since I want to see 100% of it. While being able to hover and see the customize text of each one.
I think this is what you mean.
#edit
I change from background-size: 190px 254px; to background-size: 180px 244px;
.card {
--background: linear-gradient(to left, #f7ba2b 0%, #ea5358 100%);
width: 190px;
height: 254px;
padding: 5px;
border-radius: 1rem;
overflow: visible;
background: #f7ba2b;
background: var(--background);
position: relative;
z-index: 1;
}
.card::after {
position: absolute;
content: "";
top: 30px;
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
transform: scale(0.8);
filter: blur(25px);
background: #f7ba2b;
background: var(--background);
transition: opacity .5s;
}
.card-info {
--color: #181818;
background: var(--color);
background-image: url('https://images.pexels.com/photos/337909/pexels-photo-337909.jpeg?auto=compress&cs=tinysrgb&w=1600');
background-size: 180px 244px;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
color: var(--color);
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: visible;
border-radius: .7rem;
}
.card .title {
font-weight: bold;
letter-spacing: .1em;
opacity:0;
}
/*Hover*/
.card:hover::after {
opacity: 0;
}
.card:hover .title {
color: #f7ba2b;
transition: color 1s, opacity 1s;
opacity:1;
}
<div class="card">
<div class="card-info">
<p class="title">Magic Card</p>
</div>
</div>
I was wondering how I would make an object wider from the center, instead of from the left.
Here is my HTML:
<html>
<body>
<a href='#'>Hover</a>
</body>
</html>
and here is my CSS:
body{
margin:0;
padding:0;
background-color:#262626;
}
a{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
padding:10px 25px;
border:2px solid white;
text-decoration:none;
color:white;
font-family:verdana;
font-size:27px;
text-transform:uppercase;
letter-spacing:4px;
transform:1s;
}
a::before{
content:'';
position:absolute;
height:100%;
width:0%;
top:0;
left:50%;
z-index:-1;
background-image:linear-gradient(45deg, #eea949,#ff3984);
transition:.5s;
}
a:hover::before{
width:100%;
}
instead of widening from the center on hover, it widens from the left. I have tried adding transform: translate(-50%, 0); to the a:hover::before in the css, it kind of worked, but it made it a little wobbly (I don't know how to explain it). Can someone help with this?
You can do it with only background:
body {
margin: 0;
padding: 0;
background-color: #262626;
}
a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 25px;
border: 2px solid white;
text-decoration: none;
color: white;
font-family: verdana;
font-size: 27px;
text-transform: uppercase;
letter-spacing: 4px;
transition: 0.5s;
background: linear-gradient(45deg, #eea949, #ff3984) center/0% 100% no-repeat;
}
a:hover {
background-size: 100% 100%;
}
<a href='#'>Hover</a>
I think I solved it. I added a ::after to the element, rotated the gradient, and made the ::after go left 50%, while the ::before went right 50%. Like this:
body {
margin: 0;
padding: 0;
background-color: #262626;
}
a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 25px;
border: 2px solid white;
text-decoration: none;
color: white;
font-family: verdana;
font-size: 27px;
text-transform: uppercase;
letter-spacing: 4px;
transform: 1s;
}
a::before {
content: '';
position: absolute;
height: 100%;
width: 0%;
top: 0;
left: 50%;
z-index: -1;
border: none;
outline: none;
background-image: linear-gradient(45deg, #eea949, #ff3984);
transition: .5s;
}
a::after {
content: '';
position: absolute;
height: 100%;
width: 0%;
top: 0;
right: 50%;
z-index: -1;
background-image: linear-gradient(135deg, #ff3984, #eea949);
border: none;
outline: none;
transition: .5s;
}
a:hover::before {
width: 50%;
}
a:hover::after {
width: 50%;
}
<html>
<body>
<a href='#'>Hover</a>
</body>
</html>
I hope this helps. If you want to see a JSFiddle, click here.
Add these styles to the body element to center the link. Then remove the position: absolute; top: 0 and left:0; from the link (they would be redundant with flex) and add this style to make it parent.
body{
display: flex;
justify-content: center;
align-items: center;
}
a{
position: relative
transition: all .1s;
}
and then add transform: translateX(-50%); on the a:hover::before{} as you wanted.
This format I found to not have a wobble.
Using http://jsfiddle.net/4UNuB/5/ as an example, the image has been set as background
.box1 {
border: #999 2px solid;
width: 180px;
height: 250px;
background-image: url(http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png);
background-position: center;
background-repeat: no-repeat;
}
But, if I can't use a background image, and instead have an img src within the div itself like this
<div class="box1">
<img src="http://placehold.it/180x250">
</div>
The mask no longer covers the image, instead sitting below it.
See this fiddle http://jsfiddle.net/4UNuB/6/
But the mask is still being applied to the same place as before, so why does it move, and how to stop it moving?
Add Position Absolute and relative css for boxes.
Check The Fiddle here
.box1 {
border: #999 2px solid;
width: 180px;
height: 250px;
/*background-image: url(http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png);*/
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.black-box {
text-align: center;
font-size: 16px;
color: #fff;
background-color: rgba(00,00,00,0.8);
width: 100%;
height: 100%;
opacity: 1.0;
transition: all 0.5s ease-in-out;
position: absolute;
top: 0;
}
You can put both in the same anchor and use positioning + z-index:
.box1 {
border: #999 2px solid;
width: 180px;
height: 250px;
/*background-image: url(http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png);
background-position: center;
background-repeat: no-repeat;*/
}
img {
position: absolute;
z-index: 0;
}
.black-box {
position: relative;
z-index: 1;
text-align: center;
font-size: 16px;
color: #fff;
background-color: rgba(00,00,00,0.8);
width: 100%;
height: 100%;
opacity: 1.0;
transition: all 0.5s ease-in-out;
}
.black-box:hover {
opacity: 0.0;
transition: all 0.5s ease-in-out;
}
h2 {
padding-top: 110px;
margin: 0px;
}
<div class="box1">
<a href="http://placehold.it">
<img src="http://placehold.it/180x250">
<div class="black-box">
<h2>View Details</h2>
</div>
</a>
</div>
Also, I had to remove the h2's margin.
I have one issue in current project. I am applying background image in one div and also set opacity over it using :after.. Inside it, I have taken one another div which has border & content but I need to highlight middle section without opacity using same background image.
Sample Screenshot
.first_resorts_list_right { float: left; width: 434px; overflow: hidden; height: 477px; background-size: cover!important; background: no-repeat; padding: 70px; position: relative; background-image: url(http://s17.postimg.org/fa4ru3hm7/test.jpg); }
.resort-info { border: 10px solid #fff; padding: 20px; text-align: center; color: #000; font-size: 40px; }
.bannerimage2 { display: none; }
.expose { position: relative; z-index: 99999; }
.overlay-img { background: rgba(255,255,255,0.3); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99998; }
<div class="first_resorts_list_right">
<div class="resort-info expose">Content</div>
<div class="overlay-img"></div>
</div>
I made an alternative version, with divs wraping divs (plus sharing the same background values) instead of use :after
body {
width:100%;
height: 100vh;
margin: 0px;
font-family: arial, sans-serif;
}
#container {
width:100%;
height:100%;
position: relative;
}
#big {
top:0;
left:0;
width:100%;
height: 100%;
background-image: url("http://i.imgur.com/wvIxNg1.jpg");
background-size: 100vw 100vh;
background-repeat: no-repeat;
background-position: center;
position: relative;
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
#small {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 70%;
height: 70%;
outline: 4px solid white;
left: 0;
right: 0;
margin: auto;
background-image: url("http://i.imgur.com/wvIxNg1.jpg");
background-size: 100vw 100vh;
background-position: center;
background-repeat: no-repeat;
text-align: center;
color: white;
-webkit-filter: contrast(120%); /* Chrome, Safari, Opera */
filter: contrast(120%);
}
#white {
width:100%;
height: 100%;
background-color: white;
opacity: 0.1;
}
h1 {
font-weight: 100;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
letter-spacing:8px;
}
<div id=container>
<div id=big>
<div id=white></div>
</div>
<div id=small><h1>FOCUS</h1></div>
</div>
I need to center horizontally a button with aboslute position (because it must keep on top when to click and launch overlay and click to close overlay) on a position fixed topbar, here is the code:
.topbar {
text-align: center;
min-width: 100%;
height: 50px;
background-color: #29343a;
position: fixed;
top: 0;
}
.button {
display: inline-block;
margin-right: auto;
margin-left: auto;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(153,204,51,0.9);
}
Thats is just the css of the three parts, the website is more complex but i think that 3 parts are the key. the topbar must be fixed on top, the buton have to be centered into the topbar div, and the overlay launch and the buttop keeps on top of the overlay.
What is working: the overlay works fine and the button keeps on top but its not horizontally centered on the topbar.
How i can hack this?
You could to the left:0 and right:0 trick.
.button {
display: inline-block;
margin-right: auto;
margin-left: auto;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
left: 0; /*added*/
right: 0; /*added*/
}
Or do the left:50% with negative left margin (half width).
.button {
display: inline-block;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
left: 50%; /*added*/
margin-left: -30px; /*added*/
}
Or use CSS3 transform.
.button {
display: inline-block;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
left: 50%; /*added*/
transform: translateX(-50%); /*added*/
}
Based on the information you provided this is what I could come up with:
/* CSS */
.topBar {
position:fixed;
top:0;
left:0;
width:100%;
height:auto;
background-color:#29343a;
}
.overlay {
display:none;
width: 100%;
background: rgba(153,204,51,0.9);
margin:0;
}
.button, .button:active, .button:visited, .button:hover {
display: block;
position:relative;
text-align:center;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
margin:0 auto;
padding:10px;
}
.topBar:hover > .overlay {
display:block;
}
And I added some html because you didn't provide any:
<!-- HTML -->
<div class="topBar">
Button
<div class="overlay">
<p>Some text shows when button hover</p>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/0napm6y3/
Here is the complete code of this component made on react:
This is the react component, the overlay launch is the overlay var, the other one is for one animation on the button:
var React = require('react');
var StatusBarButtonView = React.createClass({
getInitialState: function() {
return {cliked: false};
},
handleClick: function(event) {
this.setState({cliked: !this.state.cliked});
},
render: function() {
var fondo = this.state.cliked ? 'active' : '';
var overlay = this.state.cliked ? 'open' : '';
return (
<div>
<div className={"aui-profit-statusbar-button-container " + (fondo)} onClick={this.handleClick}>
<img src="images/aui-navbar-element-icon-cross.png" className={"rotate " + (fondo)}/>
</div>
<div className={"overlay overlay-slidedown " + (overlay)}>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
);
}
});
module.exports = StatusBarButtonView;
Here is the topbar scss:
.aui-profit-statusbar-container {
text-align: center;
min-width: 100%;
height: 50px;
background-color: #29343a;
position: fixed;
top: 0;
}
Here is the button scss:
.aui-profit-statusbar-button-container {
display: inline-block;
margin-right: auto;
margin-left: auto;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
left: 0;
right: 0;
&:hover {
background-color: #56d9f6;
}
&.active {
background-color: #ff4b39;
border-bottom: 2px solid #e43f30;
}
.rotate {
margin-top: 13px;
width: 23px;
height: 23px;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-ms-transition-duration: 0,2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-ms-transition-property: -ms-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.active {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
}
Here is the overlay css:
/* Overlay style */
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(153,204,51,0.9);
}
/* Overlay closing cross */
.overlay .overlay-close {
width: 80px;
height: 80px;
position: absolute;
right: 20px;
top: 20px;
overflow: hidden;
border: none;
background: url(../img/cross.png) no-repeat center center;
text-indent: 200%;
color: transparent;
outline: none;
z-index: 100;
}
/* Menu style */
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #e3fcb1;
}
/* Effects */
.overlay-slidedown {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}
.overlay-slidedown.open {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
#media screen and (max-height: 30.5em) {
.overlay nav {
height: 70%;
font-size: 34px;
}
.overlay ul li {
min-height: 34px;
}
}
Now it works perfectly, thanks to all.
Next thing i have to do is separate overlay of buttom component. and keep it running, but im wondering to to pass the action to one component to another.... i have to learn more about react.js