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.
Related
I am making buttons by using the anchor tag. I want to make an effect but it is not working as expected. pseudo-element is flowing over the button and text is also being hidden as well. But I want something like this, the pseudo-element will be in between the button and background.
section {
padding: 80px 0;
}
section.one {
background: #76B39D;
}
.button {
color: white;
margin: 10px;
font-size: 17px;
font-weight: 700;
letter-spacing: 1px;
text-transform: capitalize;
}
.button-type-1 {
border: 2px solid #fff;
padding: 10px 33px;
overflow: hidden;
position: relative;
}
.button-type-1:after {
position: absolute;
content: '';
width: 0px;
height: 0px;
background: #fff;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
z-index: 0;
transition: all 0.4s ease;
}
.button-type-1:hover:after {
width: 200px;
height: 200px;
}
.button-type-1:hover,
.button-type-1:focus {
text-decoration: none;
}
<section class="one">
read
</section>
I like to do, the pseudo element background will be fit to button size on hover.
And the button text will also be seen but i thing z-index is messed up somewhere or anything else.
z-index 1 your relative .button-type-1 and -1 the :after pseudo.
Also, make your button inline-block to prevent the :after element overflow
section {
padding: 80px 0;
}
section.one {
background: #76B39D;
}
.button {
color: white;
margin: 10px;
font-size: 17px;
font-weight: 700;
letter-spacing: 1px;
text-transform: capitalize;
}
.button-type-1 {
border: 2px solid #fff;
padding: 10px 33px;
overflow: hidden;
position: relative;
display: inline-block;
z-index:1;
}
.button-type-1:after {
position: absolute;
content: '';
width: 0px;
height: 0px;
background: #fff;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
z-index: -1;
transition: all 0.4s ease;
}
.button-type-1:hover:after {
width: 200px;
height: 200px;
}
.button-type-1:hover,
.button-type-1:focus {
text-decoration: none;
color:#000;
}
<section class="one">
read
</section>
I am wondering on what steps I should take so that I can optimise this webpage for different browsers.
If you take a look at my JSFiddle: https://jsfiddle.net/xpvt214o/137951/
when my webpage is condensed down, the elements are all over the place, and everything is only really in the correct position in full screen. How do I fix this?
HTML:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="main.js"></script>
<title>A'S COFFEE</title>
</head>
<body>
<div id="wrapper">
<div id="MenuIcon">
<div id="MenuLine"></div>
</div>
<div id="MainMenu">
<div id="logo">
<h1 class="logo">A's Coffee</h1>
</div>
<ul>
<li>HOME<div class="line"></div></li>
<li>MAKE AN ORDER<div class="line"></div></li>
<li>VIEW ORDERS<div class="line"></div></li>
</ul>
<div id="close">
<P>Click to leave</P>
</div>
</div>
<div id="centeralign">
<a class="button" id="btn1" href="place.html">Want to Place <br>an Order?</a><br>
<a class="button" id="btn2" href="#">View Orders?</a>
</div>
CSS:
body{
background-color: purple;
}
h1{
color: #e5b78e;
font-family: Arial;
font-size: 100pt;
padding: 0px;
margin: 0px;
display: block;
}
.button{
display: inline-block;
background: transparent;
text-transform: uppercase;
font-weight: bold;
font-style: normal;
font-family: Arial;
font-size: 2em;
letter-spacing: 0.2em;
color: rgba(223,190,106,0.7);
border-radius: 0;
padding: 18px 80px 20px;
transition: all 0.7s ease-out;
background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
background-position: 1% 50%;
background-size: 300% 300%;
text-decoration: none;
margin: 0.625rem;
border: none;
border: 1px solid rgba(223,190,106,0.3);
}
.button:hover{
color: #fff;
border: 1px solid rgba(223,190,106,0);
color: $white;
background-position: 99% 50%;
}
#btn1{
margin-top:30px;
display: inline-block;
padding-left: 30px;
padding-right:30px;
}
#btn2{
margin-top:30px;
display: inline-block;
padding-left: 47px;
padding-right: 47px;
}
.button:hover{
opacity: 1;
transition: opacity .2s ease-in;
}
#centeralign{
text-align: center;
top: 20em;
position: relative;
transition: all .5s ease-in-out;
}
br{
padding: 40px;
}
/* NAV */
#MenuIcon{
height: 25px;
width: 50px;
position: fixed;
top:50;
right: 50;
}
#MenuIcon:hover{
cursor: pointer;
}
#MenuLine{
height: 4px;
width: 50px;
background-color: #e5b78e;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all .3s;
}
#MenuIcon:hover #MenuLine{
width: 40px;
}
#MenuLine::before{
content: '';
height: 4px;
width: 40px;
background-color: #e5b78e;
position: absolute;
margin-top: 10px;
transition: all .3s;
}
#MenuIcon:hover #MenuLine::before{
width: 50px;
}
#MenuLine::after{
content: '';
height: 4px;
width: 40px;
background-color: #e5b78e;
position: absolute;
margin-top: -10px;
transition: all .3s;
}
#MenuIcon:hover #MenuLine::after{
width: 50px;
}
#MainMenu{
height: 100vh;
width: 300px;
background-color: #181818;
-webkit-clip-path:polygon(0 0,100% 0,0% 100%,0% 100%);
position: fixed;
top:0;
left: -300px;
transition: all .5s ease-in-out;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
font-family: arial;
font-weight: bold;
color:white;
text-align: center;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
}
ul li{
margin: 20px;
}
ul li:hover{
cursor: pointer;
}
.line{
height: 2px;
width: 150px;
background-color: white;
margin-top: 10px;
position: absolute;
left: 50%;
transform: translate(-50%);
transition: all .3s;
}
ul li:hover .line{
width: 180px;
}
#logo{
position: absolute;
top:10%;
left: 50%;
transform: translate(-50%);
}
#close{
position: absolute;
bottom: 20%;
left: 50%;
transform: translate(-50%);
}
#close:hover{
cursor: pointer;
}
.LOGO{
font-size: 4.5em;
}
JS:
$(document).ready(function(){
$("#MenuIcon").click(function(){
$("#MainMenu").css("left","0px");
$("#MOVE").css("left","300px");
function showMenu(){
$("#MainMenu").css("-webkit-clip-path","polygon(0 0,100% 0,100% 100%,0% 100%)");
$("#MenuIcon").animate({right:'-100'},300);
}
setTimeout(showMenu,100);
});
$("#close").click(function(){
$("#MainMenu").css("-webkit-clip-path","polygon(0 0,0% 0,100% 100%,0% 100%)");
function hideMenu(){
$("#MainMenu").css("left","-300px");
$("#MOVE").css("left","0px")
$("#MenuIcon").animate({right:'50'},300);
}
setTimeout(hideMenu,300);
function originalLayout(){
$("#MainMenu").css("-webkit-clip-path","polygon(0 0,100% 0,0% 100%,0% 100%)");
}
setTimeout(originalLayout,600);
});
});
Use media queries in your CSS to set styles for different sizes. Like so
#media only screen and (max-width: 767px) {
html {
color: #000;
}
/* styles to make page responsive */
}
This will make the text black when your page is <= 767px wide. Instead of changing the color change the layout of your elements.
You can use as many as you’d like so you can set a breakpoint at 350, 500, etc. and make your page look flawless at all different sizes. Hope that gets you started :)
For more info you can check out this link: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
<style>
.ui-state-active {
color: #fff;
background:red;
#box-shadow: inset -7px 7px 9px -7px #236c4d;
width:50px;
height:50px;
}
.ui-state-active:hover{
box-shadow: inset 15px 7px 9px -7px #fff;
box-shadow: inset -7px 7px 9px -7px #fff;
}
</style>
<div class="ui-state-active">18
</div>
I need something like this, when i hovered on a div it show a transformed triangle on top right like shown in image, I just explained my requirement as image for clear clarification
You can do it with pseudo elements :before or :after
.ui-state-active {
color: #fff;
background:red;
width:50px;
height:50px;
position: relative;
}
.ui-state-active:hover:after{
content: '';
position: absolute;
top: 3px;
right: 3px;
border: solid 10px white;
border-color: white white transparent transparent;
}
<div class="ui-state-active">18
</div>
I wouldn't use a box-shadow, I'd use a pseudo-element.
There's a couple of way to do that.
1. A position, rotated pseduo-element:
span {
display: block;
width: 3em;
height: 3em;
line-height: 3em;
text-align: center;
background: #f00;
color: white;
font-weight: bold;
margin: 3em auto;
overflow: hidden;
position: relative;
}
span::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: orange;
top: -100%;
left: 100%;
transform: rotate(45deg) translate(0%, 0%);
transition: transform .35s ease;
}
span:hover::after {
transform: rotate(45deg) translate(0%, 50%)
<span>16</span>
2. Alternatively, a psuedo-element made entirely of borders
div {
display: block;
width: 3em;
height: 3em;
line-height: 3em;
text-align: center;
background: #f00;
color: white;
font-weight: bold;
margin: 3em auto;
overflow: hidden;
position: relative;
}
div::after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 0;
right: 0;
border-style: solid;
border-color: orange orange transparent transparent;
border-width: 0px;
transition: border-width .35s ease;
}
div:hover::after {
border-width: 12px;
}
<div>16</div>
Try this out, :)
HTML
<div class="date">
<div class="sideflip"></div>
18
</div>
CSS
.date
{
width:80px;
height:80px;
border:1px solid #000000;
text-align:center;
font-size:65px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
background:red;
color:#ffffff;
position:relative;
overflow:hidden;
}
.sideflip
{
width:50px;
height:50px;
font-size:1px;
position:absolute;
-ms-transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
margin-left:160px;
margin-top:-130px;
background:#ffffff;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.date:hover .sideflip
{
margin-left:60px;
margin-top:-30px;
}
.date:hover
{
cursor:pointer;
}
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;
}
I have a link in the final div (slide4) and it is not working. I've messed around with z-index and positioning but that didn't work.
This is my first time messing around with a parallax design and I'm using a template to familiarize myself with it, but I hit a snag in this and can't figure it out.
Here's the codepen: http://codepen.io/anon/pen/bdGcI
CSS:
<style type="text/css">
html {
height: 100%;
overflow: hidden;
}
`body {
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Oswald;
}`body {
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Oswald;
}
a:link {
text-decoration: none;
color: #fff;
}
a:visited {
text-decoration: none;
color: #ccc;
}
a:hover {
text-decoration: underline;
color: #B22222;
}
a:active {
text-decoration: underline;
}
h1 {
font-size: 550%
}
h2 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
p2 {
font-size: 300%;
line-height: 150%;
color: #fff;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 1px;
border-radius: 10px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 1px rgba(0, 0, 0, .7);
}
img:last-of-type {
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 2%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 4px 4px #000;
}
.header2 {
text-align: center;
font-size: 175%;
color: #fff;
}
#title {
background-image: url("bg2");
background-attachment: fixed;
}
#slide1:before {
background-image: url("bg3");
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide2 {
background-image: url("bg4");
background-attachment: fixed;
}
#slide3:before {
background-image: url("bgbg");
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide4 {
background: #222;
}
</style>
</head>
HTML in question:
<div id="slide3" class="slide">
<div class="title">
<h2>Music</h2>
<p>words words words.</p>
</div>
</div>
<div id="slide4" class="slide header2">
Final Page Link.
</div>
Because :before pseudo class is causing an overlay over the content as you have written
.slide:before {
content: "";
position: absolute;
/*top:0;*/ /*remove this */
bottom: 0;
left:0;
right:0;
}
Code pen Demo
You have .slide:before with position:absolute; if you remove that it will work, so your problem is that Absolute position is Over the Link and content. If you add position:relative; to ahref or add relative to new Container inside #slide4, it will work..
1http://codepen.io/anon/pen/HGIiF/