I have the following grid of divs
<div id="container">
<div class="imgContainer">
<div class="ar-image">
<div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"></div>
<p class="descfirst">Progressive</p>
<div class="first"><span class = "green" style="width: 85%"></span></div>
<p class="descsecond">Happy</p>
<div class="second"><span class = "green" style="width: 55%"></span></div>
<p class="descthird">Creative</p>
<div class="third"><span class = "green" style="width: 43%"></span></div>
<p class="descfourth">Slow</p>
<div class="fourth"><span class = "red" style="width: 75%"></span></div>
<p class="descfifth">Boring</p>
<div class="fifth"><span class = "red" style="width: 65%"></span></div>
<p class="descsixth">Text</p>
<div class="sixth"><span class = "red" style="width: 60%"></span></div>
<h1 class="topleft">1 | Scooter</h1>
<h3 class="topright">Rock</h3>
<h3 class="bottomleft">T 21%, C 6%</h3>
<h3 class="bottomright">XXX</h3>
</div>
<div class="ar-image">
<div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"></div>
<p class="descfirst">Progressive</p>
<div class="first"><span class = "green" style="width: 85%"></span></div>
<p class="descsecond">Happy</p>
<div class="second"><span class = "green" style="width: 55%"></span></div>
<p class="descthird">Creative</p>
<div class="third"><span class = "green" style="width: 43%"></span></div>
<p class="descfourth">Slow</p>
<div class="fourth"><span class = "red" style="width: 75%"></span></div>
<p class="descfifth">Boring</p>
<div class="fifth"><span class = "red" style="width: 65%"></span></div>
<p class="descsixth">Text</p>
<div class="sixth"><span class = "red" style="width: 60%"></span></div>
<h1 class="topleft">1 | Scooter</h1>
<h3 class="topright">Rock</h3>
<h3 class="bottomleft">T 21%, C 6%</h3>
<h3 class="bottomright">XXX</h3>
</div>
<div class="ar-image">
<div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"></div>
<p class="descfirst">Progressive</p>
<div class="first"><span class = "green" style="width: 85%"></span></div>
<p class="descsecond">Happy</p>
<div class="second"><span class = "green" style="width: 55%"></span></div>
<p class="descthird">Creative</p>
<div class="third"><span class = "green" style="width: 43%"></span></div>
<p class="descfourth">Slow</p>
<div class="fourth"><span class = "red" style="width: 75%"></span></div>
<p class="descfifth">Boring</p>
<div class="fifth"><span class = "red" style="width: 65%"></span></div>
<p class="descsixth">Text</p>
<div class="sixth"><span class = "red" style="width: 60%"></span></div>
<h1 class="topleft">3 | ABBA</h1>
<h3 class="topright">Rock</h3>
<h3 class="bottomleft">T 21%, C 6%</h3>
<h3 class="bottomright">XXX</h3>
</div>
</div>
.article-image{
height: 320px;
width: 480px;
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
}
.ar-image:hover .article-image{
-webkit-filter: grayscale(100%) blur(2px);
filter: grayscale(100%) blur(2px);
transition: .1s ease-in-out;
}
.ar-image{
position: relative;
display:inline-block;
padding: 1%;
width: 25.66%;
}
.ar-image > p{
display: none;
}
.ar-image:hover > p{
position: absolute;
top: 0;
display: block;
color: #ffffff;
font-size: 16px;
font-weight: bold;
z-index: 0;
width: 100%;
height: 100%;
text-align: center;
transition: .4s ease-in-out;
line-height:150px;
margin:0;
}
.ar-image > p.descfirst, p.descsecond, p.descthird, p.descfourth, p.descfifth, p.descsixth{
display: none;
}
.ar-image:hover > p.descfirst{
position: absolute;
top: 40px;
left: 40px;
display: block;
color: #ffffff;
font-size: 16px;
font-weight: bold;
z-index: 0;
width: 100%;
height: 100%;
text-align: left;
transition: .4s ease-in-out;
line-height:25px;
margin:0;
}
.ar-image:hover > p.descsecond{
position: absolute;
top: 80px;
left: 40px;
display: block;
color: #ffffff;
font-size: 16px;
font-weight: bold;
z-index: 0;
width: 100%;
height: 100%;
text-align: left;
transition: .4s ease-in-out;
line-height:25px;
margin:0;
}
.ar-image:hover > p.descthird{
position: absolute;
top: 120px;
left: 40px;
display: block;
color: #ffffff;
font-size: 16px;
font-weight: bold;
z-index: 0;
width: 100%;
height: 100%;
text-align: left;
transition: .4s ease-in-out;
line-height:25px;
margin:0;
}
.ar-image:hover > p.descfourth{
position: absolute;
top: 200px;
left: 40px;
display: block;
color: #ffffff;
font-size: 16px;
font-weight: bold;
z-index: 0;
width: 100%;
height: 100%;
text-align: left;
transition: .4s ease-in-out;
line-height:25px;
margin:0;
}
.ar-image:hover > p.descfifth{
position: absolute;
top: 240px;
left: 40px;
display: block;
color: #ffffff;
font-size: 16px;
font-weight: bold;
z-index: 0;
width: 100%;
height: 100%;
text-align: left;
transition: .4s ease-in-out;
line-height:25px;
margin:0;
}
.ar-image:hover > p.descsixth{
position: absolute;
top: 280px;
left: 40px;
display: block;
color: #ffffff;
font-size: 16px;
font-weight: bold;
z-index: 0;
width: 100%;
height: 100%;
text-align: left;
transition: .4s ease-in-out;
line-height:25px;
margin:0;
}
.ar-image > div.first, div.second, div.third, div.fourth, div.fifth, div.sixth{
display: none;
}
.ar-image:hover > div.first{
position: absolute;
top: 40px;
left: 200px;
display: block;
height: 25px; /* Can be anything */
background-color: rgba(85,85,85,0.4);
bottom: 20px;
right: -40px;
width: 45%;
}
.ar-image:hover > div.second{
position: absolute;
top: 80px;
left: 200px;
display: block;
height: 25px; /* Can be anything */
position: absolute;
background-color: rgba(85,85,85,0.4);
bottom: 20px;
right: -40px;
width: 45%;
}
.ar-image:hover > div.third{
position: absolute;
top: 120px;
left: 200px;
display: block;
height: 25px; /* Can be anything */
position: absolute;
background-color: rgba(85,85,85,0.4);
bottom: 20px;
right: -40px;
width: 45%;
}
.ar-image:hover > div.fourth{
position: absolute;
top: 200px;
left: 200px;
display: block;
height: 25px; /* Can be anything */
position: absolute;
background-color: rgba(85,85,85,0.4);
bottom: 20px;
right: -40px;
width: 45%;
}
.ar-image:hover > div.fifth{
position: absolute;
top: 240px;
left: 200px;
display: block;
height: 25px; /* Can be anything */
position: absolute;
background-color: rgba(85,85,85,0.4);
bottom: 20px;
right: -40px;
width: 45%;
}
.ar-image:hover > div.sixth{
position: absolute;
top: 280px;
left: 200px;
display: block;
height: 25px; /* Can be anything */
position: absolute;
background-color: rgba(85,85,85,0.4);
bottom: 20px;
right: -40px;
width: 45%;
}
.ar-image > div > span.green{
display: block;
height: 100%;
background-color: rgb(43,194,83);
position: relative;
overflow: hidden;
}
.ar-image > div > span.red{
display: block;
height: 100%;
background-color: #ff4742;
position: relative;
overflow: hidden;
}
.ar-image > h1.topleft{
display: visible;
position: absolute;
text-align: left;
color: #ffffff;
top: 15px;
right: -40px;
width: 100%;
}
.ar-image:hover > h1.topleft{
display: none;
}
.ar-image > h3.bottomleft{
display: visible;
position: absolute;
text-align: left;
color: #ffffff;
bottom: 20px;
right: -40px;
width: 100%;
}
.ar-image:hover > h3.bottomleft{
display: none;
}
.ar-image > h3.bottomright{
visibility:visible;
position: absolute;
text-align: left;
color: #ffffff;
bottom: 20px;
left: 440px;
width: 100%;
}
.ar-image:hover > h3.bottomright{
display: none;
}
.ar-image > h3.topright{
visibility:visible;
position: absolute;
text-align: left;
color: #ffffff;
top: 15px;
left: 440px;
width: 100%;
}
.ar-image:hover > h3.topright{
display: none;
}
On hover the image gets blurred and a set of css progress bars is overlaid. I also want each of the divs to have a link but so far was unsuccessful in implementing this without breaking the hover effect.
Any suggestions how a link can be implemented for the whole div (inkl. the and )?
UPDATE
When I wrap the whole div in an atag it breajs the hover effekt
Just tried and wrapping ar-image with a tags seems to work. I might not be understanding your question though.
Related
when you hover over the image blue arrow moves slowly. When you remove the cursor from the image white arrow comes back sharply. How to make a white arrow return slowly?
#keyframes left_to_right {
from {margin-left: -15px;}
to {margin-left: 0; }
}
div .footer-text{
position: absolute;
top: 10%;
left: 3%;
height: 20px;
width: 85%;
}
div .footer-text:after{
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat;
width: 130px;
height: 15px;
display: inline-block;
margin-left: 10px;
position: relative;
}
div:hover .footer-text:before{
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat;
width: 130px;
height: 15px;
margin-right: 5px;
display: inline-block;
animation: left_to_right 0.4s ease;
}
div:hover .footer-text:after{
content: '';
background: none;
}
div .footer-text span{
position: relative;
top:-5px;
font-size: 12px;
color: #313B78;
display: inline-block;
}
<div>
<a href="" class='footer-text'>
<span>13 September</span>
</a>
</div>
Obviously, there are ways to do this by CSS animation, but I've never used this in my development.
It's not required to use animation for that. transition is enough
just add transition: width .4s ease; to :after for unhovered element and play with width attribute
div .footer-text{
position: absolute;
top: 10%;
left: 3%;
height: 20px;
width: 85%;
}
div .footer-text span{
position: relative;
top:-5px;
font-size: 12px;
color: #313B78;
display: inline-block;
}
div .footer-text:after{
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat right;
width: 130px;
height: 15px;
display: inline-block;
margin-left: 10px;
position: relative;
transition: width .4s ease;
}
div:hover .footer-text:after{
width: 0;
}
div .footer-text:before{
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat right;
width: 0;
height: 15px;
margin-right: 5px;
display: inline-block;
transition: width .4s ease;
}
div:hover .footer-text:before{
width: 130px;
}
<div>
<a href="" class='footer-text'>
<span>13 September</span>
</a>
</div>
I do it:)
div {
width:50%;
position: relative;
height: 20px;
}
div .footer-text{
position: absolute;
top: 0;
left: 0;
line-height: 20px;
width: 100%;
height: 100%;
font-family: sans-serif;
overflow: hidden;
}
div .footer-text:before {
content: '';
background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%228%22%20height%3D%2215%22%20viewBox%3D%220%200%208%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201.5l6%206-6%206%22%20stroke%3D%22%23C5C8D0%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat right center;
background-size: 8px;
width: 8px;
height: 15px;
position: absolute;
right: 0;
top: 50%;
transform: translate(0,-7px);
z-index: 2;
transition: .4s ease-in-out;
}
div .footer-text span {
position: absolute;
top: 0;
left: 0;
font-size: 12px;
color: #313B78;
display: block;
white-space: nowrap;
z-index: 1;
transition: .4s ease-in-out;
}
div .footer-text span:before {
content: '';
display: block;
width: 100vw;
height: 15px;
position: absolute;
top: 50%;
right: 100%;
margin: -7px 20px 0 0;
background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221110%22%20height%3D%2214%22%20viewBox%3D%220%200%201110%2014%22%3E%3Cpath%20fill%3D%22%23313B78%22%20d%3D%22M1109.424%206.076l-6-6a.599.599%200%2010-.848.848l4.975%204.976H1a.6.6%200%20100%201.2h1106.551l-4.975%204.976a.599.599%200%2010.848.848l6-6a.6.6%200%20000-.848z%22%2F%3E%3C%2Fsvg%3E') no-repeat right top;
background-size: auto 14px;
}
div .footer-text span:after {
content: '';
display: block;
width: 100vw;
height: 1px;
position: absolute;
top: 50%;
background: #C5C8D0;
left: calc(100% + 20px);
}
div .footer-text:hover:before {
transform: translate(20px,-7px);
}
div .footer-text:hover span {
left: 100%;
transform: translateX(-100%);
}
<div>
<a href="" class='footer-text'>
<span>13 September</span>
</a>
</div>
#keyframes left_to_right {
from {
margin-left: -15px;
}
to {
margin-left: 0;
}
}
div .footer-text {
position: absolute;
top: 10%;
left: 3%;
height: 20px;
width: 85%;
}
div .footer-text:after {
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat;
width: 130px;
height: 15px;
display: inline-block;
margin-left: 10px;
position: relative;
animation: left_to_right 0.4s ease;
}
div:hover .footer-text:before {
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat;
width: 130px;
height: 15px;
margin-right: 5px;
display: inline-block;
animation: left_to_right 0.4s ease;
}
div:hover .footer-text:after {
display: none;
}
div .footer-text span {
position: relative;
top: -5px;
font-size: 12px;
color: #313B78;
display: inline-block;
}
<div>
<a href="" class='footer-text'>
<span>13 September</span>
</a>
</div>
here is a simplified version of my webpage. I am experiencing an issue where my buttons ( tags) are overlapping my main h1 element. How can I fix this, so they do not overlap? I believe that the issue is being caused because I have set the position of the div #MOVE to fixed. However, I need this due to my animated navigation bar.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css">
<script src="jquery-1.10.2.min.js">
</script>
<script src="main.js">
</script>
<title>A'S COFFEE</title>
</head>
<body>
<div id="MOVE">
<h1 class="logoone">COFFEE.</h1>
<h1 class="logotwo">BETTER WITH A'S</h1>
</div>
<div class="centeralign">
<a class="button" href="place.html" id="btn1">Want to Place<br>
an Order?</a><br>
<a class="button" href="#" id="btn2">View Orders?</a>
</div>
<footer></footer>
</body>
</html>
CSS:
h1{
color: #e5b78e;
font-family: Arial;
font-size: 100pt;
padding: 0px;
margin: 0px;
display: block;
}
.logoone{
margin-left: 50px;
padding-top: 40px;
letter-spacing: 15px;
}
.logotwo{
margin-left: 50px;
margin-bottom: 70px;
letter-spacing: 15px;
}
body{
background: url("../img/image3.jpg") no-repeat center center fixed;
background-size: cover;
}
.button{
text-decoration: none;
padding: 30px;
background-color: white;
opacity: 0.5;
font-family: arial;
font-size: 25pt;
text-transform: uppercase;
font-weight: bolder;
color: #202530;
border-radius: 1px;
transition: opacity .2s ease-out;
margin-top: 10px;
letter-spacing: 4px;
}
.button a{
color: rgba(0,0,0,0.5);
}
#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;
}
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:100;
left: 50%;
transform: translate(-50%);
}
#close{
position: absolute;
bottom: 150;
left: 50%;
transform: translate(-50%);
}
#close:hover{
cursor: pointer;
}
.LOGO{
font-size: 4.5em;
}
#MOVE{
position:fixed;
top:0%;
left: 0px;
transition: all .5s ease-in-out;
width:85%;
height: 100%;
}
Try
#MOVE{
position:relative;
top:0%;
left: 0px;
transition: all .5s ease-in-out;
width:85%;
height: 100%;
}
That sets the position relative to other elements within the page
I am trying to position a button 10px off the horizontal center of the screen. This is the button code. The button uses some fancy hovering effect, which doesn't move with the button. How can I put the button 10px off the horizontal center of the screen?
body {
background-color: green;
}
.button-2 {
width: 140px;
height: 50px;
border: 2px solid white;
float: left;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.watch-video-position {}
<div class="watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
I have made some changes in the css to class button-2.
.button-2 {
float: none;
margin: 0 auto;
top: 10px;
}
body {
background-color: green;
}
.button-2 {
border: 2px solid white;
box-sizing: border-box;
cursor: pointer;
float: none;
height: 50px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
top: 10px;
width: 140px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.watch-video-position {}
<div class="watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
You need to use this:
.top {
position: relative;
}
.top .button-2 {
position: absolute;
left: 50%;
margin-left: -70px;
}
Make sure you add the unique class top to the first <div> and use that to position. You can also use margin and padding on the .top.
body {
background-color: green;
}
.button-2 {
width: 140px;
height: 50px;
border: 2px solid white;
float: left;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.top {
position: relative;
padding-top: 25px;
}
.top .button-2 {
position: absolute;
left: 50%;
margin-left: -70px;
}
<div class="top watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
try centering its parent and shifting it within its parent:
body {
background-color: green;
text-align: center;
}
.outer {
width: 200px;
margin: auto;
background-color: blue;
}
.button-2 {
width: 140px;
height: 50px;
border: 2px solid white;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.watch-video-position {}
<div class="watch-video-position outer">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
try width 90% of div.button-2 and set border and padding to anchor.
body {
background-color: green;
}
.button-2 {
width: 90%;
height: 50px;
float: left;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
border: 2px solid white;
padding:15px;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.top {
position: relative;
padding-top: 25px;
}
.top .button-2 {
position: absolute;
left: 50%;
margin-left: -70px;
}
<div class="top watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
When adding position: relative; to the code the background popup window won't get any opacity - what is the reason for that? I don't understand why centering the web page should affect background opacity.
Thanks for anyone that can help!!
<html>
<head>
<style>
body {
background-color: white;
width: 960px;
margin: auto;
position: relative;
}
.one {
background: black;
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 12px;
font-family: Book Antiqua;
color: #ffffff;
font-size: 60px;
text-align: center;
width: 75px;
height: 75px;
overflow:hidden;
float:left;
position:absolute;
transition: .5s ease;
top: 120px;
left: 140px;
text-align: center;
text-vertical-align: middle;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);;
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
</style>
</head>
<body>
<a class="one" id="one" href="#popup1" onclick="changeZIndex(this)">1</a>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
1
</div>
</div>
</div>
</body>
</html>
Link
Add height to the html and body element
CSS
html,
body
{
height: 100%;
}
CSS Errors
.one
{
background: black;
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 12px;
font-family: Book Antiqua;
color: #ffffff;
font-size: 60px;
text-align: center;
width: 75px;
height: 75px;
overflow: hidden;
float: left;
position: absolute;
transition: .5s ease;
top: 120px;
left: 140px;
text-align: center;
/* incorrect value
text-vertical-align: middle;
*/
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
/*
transition: opacity 500ms;
*/
transition: opacity 0.5s;
visibility: hidden;
opacity: 0;
}
I'm trying to make a timeline in pure CSS however I seem to be running into some problems.
When I try to set the timeline div as overflow-x: scroll it still scrolls on the y access.
This is what I've got:
#timeline {
height: 500px;
width: auto;
margin: 0;
background: red;
}
.event {
height: 500px;
}
.founded {
width: 400px;
float: left;
background: blue;
}
.grant {
width: 800px;
background: yellow;
}
<ol id="timeline">
<li class="event founded"></li>
<li class="event grant"></li>
</ol>
I just want each additional entry to follow the previous one and for it all be scroll-able horizontally. If anyone could point me in the right direction that would be amazing.
Thanks.
I literally JUST had to make one of these. This is what I came up with:
body {
padding: 25px;
font-family: sans-serif;
}
.timeline {
white-space: nowrap;
overflow-x: scroll;
padding: 30px 0 10px 0;
position: relative;
}
.entry {
display: inline-block;
vertical-align: top;
background: #13519C;
color: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
position: relative;
border-top: 4px solid #06182E;
border-radius: 3px;
min-width: 200px;
max-width: 500px;
}
.entry img {
display: block;
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.entry:after {
content: '';
display: block;
background: #eee;
width: 7px;
height: 7px;
border-radius: 6px;
border: 3px solid #06182E;
position: absolute;
left: 50%;
top: -30px;
margin-left: -6px;
}
.entry:before {
content: '';
display: block;
background: #06182E;
width: 5px;
height: 20px;
position: absolute;
left: 50%;
top: -20px;
margin-left: -2px;
}
.entry h1 {
color: #fff;
font-size: 18px;
font-family: Georgia, serif;
font-weight: bold;
margin-bottom: 10px;
}
.entry h2 {
letter-spacing: .2em;
margin-bottom: 10px;
font-size: 14px;
}
.bar {
height: 4px;
background: #eee;
width: 100%;
position: relative;
top: 13px;
left: 0;
}
<div class="bar"></div>
<div class="timeline">
<div class="entry">
<h1>1990</h1>
<h2>Entry Title</h2>
<img src="http://dummyimage.com/300x200/000/fff" /> Here's the info about this date
</div>
<div class="entry">
<h1>1995</h1>
Here's the info about this date
</div>
<div class="entry">
<h1>2000</h1>
Here's the info about this date
</div>
<div class="entry">
<h1>2005</h1>
Here's the info about this date
</div>
<div class="entry">
<h1>2010</h1>
Here's the info about this date
</div>
</div>
You can refer the below link also
#import url(https://fonts.googleapis.com/css?family=Dosis:500);
body{
background: #F1F1F1;
}
.container{
width: 1200px;
margin: auto;
}
.timeline{
counter-reset: year 2016;
position: relative;
}
.timeline li{
list-style: none;
float: left;
width: 33.3333%;
position: relative;
text-align: center;
text-transform: uppercase;
font-family: 'Dosis', sans-serif;
}
ul:nth-child(1){
color: #4caf50;
}
.timeline li:before{
counter-increment: year;
content: counter(year);
width: 50px;
height: 50px;
border: 3px solid #4caf50;
border-radius: 50%;
display: block;
text-align: center;
line-height: 50px;
margin: 0 auto 10px auto;
background: #F1F1F1;
color: #000;
transition: all ease-in-out .3s;
cursor: pointer;
}
.timeline li:after{
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: grey;
top: 25px;
left: -50%;
z-index: -999;
transition: all ease-in-out .3s;
}
.timeline li:first-child:after{
content: none;
}
.timeline li.active{
color: #555555;
}
.timeline li.active:before{
background: #4caf50;
color: #F1F1F1;
}
.timeline li.active + li:after{
background: #4caf50;
}
<h1>DevelopersTips</h1>
<div class="container">
<ul class="timeline">
<li class="active">Bacon</li>
<li>Rib</li>
<li>Sausage</li>
</ul>
</div>