Center Font Awesome icons in circles - html

I have list items with text and they have a plus icon in a circle after them done with the pseudo-element :before. How could I center all the plus icons?
.advantages .item-list-section .item {
position: relative;
margin-bottom: 15px;
}
.advantages .item-list-section .item .inner {
position: relative;
display: inline-block;
}
.advantages .item-list-section .item .inner:after {
position: absolute;
font-family: 'FontAwesome';
content: "\f067";
color: #ef6611;
width: 14px;
height: 14px;
border: 1px solid;
border-radius: 30px;
top: 5px;
right: -30px;
font-size: 8px;
line-height: 14px;
text-align: center;
display:block;
}
.advantages .item-list-section .item .inner.bottom-icon:after {
top: 100%;
margin-top: -18px;
}
.advantages .item-list-section .item.active .inner:after {
background: #f13a01;
color: #ffffff;
content: "\f068";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<section class="advantages primary">
<div class="container">
<div class="row">
<div class="col-sm-3 col-sm-offset-1 item-list-section">
<div class="item-list">
<div class="item">
<div class="inner">
<p>Продолжительный<br/>
срок службы</p>
</div>
</div>
<div class="item">
<div class="inner">
<p>Компактные<br/>
размеры</p>
</div>
</div>
<div class="item active">
<div class="inner">
<p>Насос с сухим ротором</p>
</div>
</div>
<div class="item">
<div class="inner">
<p>Котел способен стабильно<br/>работать даже при самом<br/>низком давлении</p>
</div>
</div>
<div class="item">
<div class="inner">
<p>Встроенная защита от<br/>
перепадов напряжения</p>
</div>
</div>
<div class="item">
<div class="inner">
<p>Надежная система<br/>
безопасности</p>
</div>
</div>
<div class="item">
<div class="inner">
<p>Наличие аварийных<br/>
режимов работы</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Update Css
.advantages .item-list-section .item .inner:after {
position: absolute;
font-family: 'FontAwesome';
content: "\f067";
color: #ef6611;
width: 14px;
height: 14px;
border: 1px solid;
border-radius: 30px;
top: 5px;
right: -30px;
font-size: 8px;
line-height: 16px;
text-align: center;
display:block;
}
Live Demo Here

Related

How to center cards and remove scroll bar?

I have added 9 cards to the website I'm making and I'm having two issues.
(1) How do I center the 9 cards? As it is more to the left and not centered to the screen.
(2) How do I remove the scroll bar? It seems like the spacing between the top and bottom cards and also below the bottom cards is a lot therefore its moving down and has a scroll bar.
Website Image
<!DOCTYPE html>
<html>
<head>
<title>Discover | Sweeties</title>
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
<style>
.navigation{
padding-top:30px;
padding-bottom:30px;
position:absolute;
top:0;
width:100%;
z-index:1001;
}
.navbar-right{
float:right;
padding-right:10%;
}
.navbar-right a{
text-decoration:none;
padding:10px;
color: #FFFFFF;
font-family:Calibri;
font-weight:900;
font-size: 25px;
}
.navbar-right a:hover{
text-decoration:underline;
}
.navbar-logo{
padding-left:10%;
font-family:Calibri;
font-size:30px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
.video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
#video-bg{
width:100%;
}
.portfolio-section{
margin-top:50%;
}
.tagline-left{
float:left;
width:50%;
text-align:center;
}
.tagline-right{
float:right;
width:50%;
text-align:center;
}
.tagline-video{
width:75%;
}
.tagline-right-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:17%;
font-family:Calibri;
color:#FFFFFF;
width:290px;
font-size:40px;
}
.tagline-left-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:11%;
font-family:Calibri;
color:#fff;
width:375px;
font-size:40px;
}
</style>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0,0,0,0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
</style>
</head>
<body>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="Videos/beach1.mp4" type="video/mp4">
</video>
</div>
</body>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Calibri;
}
.main{
margin: 3%;
}
.card{
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img{
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title{
text-align: center;
padding: 20px;
}
h1{
font-size: 40px;
}
h2{
font-size: 22px;
}
.des{
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button{
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding:10px;
}
button:hover{
background-color: black;
color: white;
transition: .5s;
cursor: pointer;
}
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.20);
}
.card:hover img {
transform: scale(1);
}
</style>
<body>
<div class="main">
<div class="card">
<div class="image">
<img src="Images/rakiraki.jpg">
</div>
<div class="title">
<h1>
Rakiraki</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Lautoka.jpg">
</div>
<div class="title">
<h1>
Lautoka</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/nadi.jpg">
</div>
<div class="title">
<h1>
Nadi </h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/sigatoka.jpg">
</div>
<div class="title">
<h1>
Sigatoka</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2 >
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/ph.jpg">
</div>
<div class="title">
<h1>
Pacific Harbour</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/suva.jpg">
</div>
<div class="title">
<h1>
Suva</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Labasa.jpg">
</div>
<div class="title">
<h1>
Labasa</h1>
</div>
<div class="des">
<h2> KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/savusavu.jpg">
</div>
<div class="title">
<h1>
Savusavu</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The best approach that I would suggest is flex.
I have added some custom style to yoy existing code just to make it fine in flex.
Here is my additional css added.
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
Your working fiddle.
.navigation {
padding-top: 30px;
padding-bottom: 30px;
/* position: absolute;
top: 0; */
width: 100%;
z-index: 1001;
}
.navbar-right {
float: right;
padding-right: 10%;
}
.navbar-right a {
text-decoration: none;
padding: 10px;
color: #ffffff;
font-family: Calibri;
font-weight: 900;
font-size: 25px;
}
.navbar-right a:hover {
text-decoration: underline;
}
.navbar-logo {
padding-left: 10%;
font-family: Calibri;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
#video-bg {
width: 100%;
}
.portfolio-section {
margin-top: 50%;
}
.tagline-left {
float: left;
width: 50%;
text-align: center;
}
.tagline-right {
float: right;
width: 50%;
text-align: center;
}
.tagline-video {
width: 75%;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Calibri;
}
.main {
/* Commented */
/* margin: 3%; */
}
.card {
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img {
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title {
text-align: center;
padding: 20px;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 22px;
}
.des {
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button {
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding: 10px;
}
button:hover {
background-color: black;
color: white;
transition: 0.5s;
cursor: pointer;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.2);
}
.card:hover img {
transform: scale(1);
}
/* Custom styles */
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
body {
background: cadetblue;
}
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
</div>
</header>
<div class="background-wrap">
<video
id="video-bg-elem"
preload="auto"
autoplay="true"
loop="loop"
muted="muted"
>
<source src="https://youtu.be/ujKVJcwbpRo" type="video/mp4" />
</video>
</div>
<div class="main">
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Rakiraki
</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button
onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'"
>
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Lautoka
</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Nadi
</h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Sigatoka
</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Pacific Harbour
</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Suva
</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Labasa
</h1>
</div>
<div class="des">
<h2>KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Savusavu
</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
</div>

Hover effects on webpage overide dropdown navigation bar

I have a webpage that uses purely html and CSS (no JavaScript yet). The webpage contains a simple, fixed position header with hover dropdowns for each category. The webpage content itself is arranged in 'tiles' that produce effects on hover to emphasize them (and link to other pages). I will attach an image to better explain. The dropdown works fine when at the very top of the webpage, however if the dropdown menu falls on top of one of the tiles the dropdown will disappear and trigger the tile hover effects instead.
I have ensured that all parts of the dropdown have a z-index greater than the tiles.
Dropdown HTML:
<nav class="navigation">
<ul>
<li class=dropdown>
catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
</ul>
</nav>
Page content HTML (example for single tile, code repeated):
<a href="content6.html" class="tile">
<img src="image1.jpg>
<div class="container">
<div class="overlay"></div> /* overlay that animates on hover */
/* content for the tile */
</div>
</a>
relevant CSS:
navigation {
position: fixed;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 20;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
display: inline-block;
position: relative;
}
.dropdown-content a:hover {
background-color: blue;
color: white;
}
.dropdown:hover .dropdown-content{
display: block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
z-index: 17;
}
.tile:hover .overlay {
opacity: 0.1;
}
Image 1:
Top of page(Works Fine)
Image 2:
Scrolled down(Hovering over Content 3 will close dropdown)
I would like for the dropdown menu to stay on top of tiles regardless of whether or not the hover effects are triggered. I'm not sure if this will require JavaScript. Any help is appreciated!
Edit: Snippet Added
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
a:not(p):hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
This problem can be solved by changing the z-index of headerto 20. Even though the z-index of the .dropdownclass was 20, the z-index of the header element was 10.
Although the z-index is not inherited, one needs to take into consideration the stacking context. For example, if a sibling element B has a z-index that is greater than the z-index of sibling element A, B will be above A. If Ahas a child element that has a z-index higher than that of element B, B will still be shown above A provided that B has a greater z-index than A.
For more information about stacking contexts, check out this Post.
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
a:not(p):hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 20;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
z-index:20;
position: fixed;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.content1{
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<!DOCTYPE html >
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Your hover effect is only applied to a, which means it loses the effect when mouse is not over the actual link.
Apply the hover to li instead, so it will cover it properly.
a:not(p):hover {
color: #38b6ff;
}
use this instead.
li:hover {
color: #38b6ff;
}
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
li:hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

Height of div doesn't adjust by resizing window

I'm coding school project website and I got a problem. When I resize the width of browser, child divs float down from header, thus width of div under header is affected by floated-off divs from header.
<body>
<div id="page" class="page">
<div id="header" class="header">
<div class="headerContainer">
<h1><img src="images/logo.png" alt="Gastronerez"><span>Gastronerez</span></h1>
<ul class="menu">
<li class="active">Home</li>
<li>O nás</li>
<li>Novinky</li>
<li>Jak objednat</li>
<li>Kontakty</li>
</ul>
<ul class="contact">
<li class="first"><i class="fa fa-mobile" aria-hidden="true">
</i>+420 603 585 561</li>
<li><a href="mailto:obchod#gastronerez.cz" title="E-mail"><i
class="fa fa-envelope-o" aria-hidden="true"></i>obchod#gastronerez.eu</a></li>
</ul>
<ul class="lang">
<li class="cz">CZ</li>
<li class="line">|</li>
<li class="sk">SK</li>
</ul>
</div>
</div>
<div id="categories" class="categories">
<div class="categoriesContainer">
<div class="icons">
<div class="optionlink"><a href="" title="Pracovní stoly">
<div class="option">
<div class="white">
<div class="spriteshape-2"></div>
</div>
<div class="description special"><span>Pracovní stoly</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Stolové nástavby">
<div class="option">
<div class="gray">
<div class="spriteshape-3"></div>
</div>
<div class="description special"><span>Stolové nástavby</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Pracovní desky">
<div class="option">
<div class="gray">
<div class="spriteshape-4"></div>
</div>
<div class="description special"><span>Pracovní desky</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Mycí stoly">
<div class="option">
<div class="gray">
<div class="spriteshape-5"></div>
</div>
<div class="description"><span>Mycí stoly</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Regály">
<div class="option">
<div class="gray">
<div class="spriteshape-6"></div>
</div>
<div class="description"><span>Regály</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Skříně">
<div class="option">
<div class="gray">
<div class="spriteshape-7"></div>
</div>
<div class="description"><span>Skříně</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Police">
<div class="option">
<div class="gray">
<div class="spriteshape-8"></div>
</div>
<div class="description"><span>Police</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Podstavce">
<div class="option">
<div class="gray">
<div class="spriteshape-9"></div>
</div>
<div class="description"><span>Podstavce</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Pojezdové dráhy">
<div class="option">
<div class="gray">
<div class="spriteshape-10"></div>
</div>
<div class="description special"><span>Pojezdové dráhy</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Výlevky">
<div class="option">
<div class="gray">
<div class="spriteshape-11"></div>
</div>
<div class="description"><span>Výlevky</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Digestoře">
<div class="option">
<div class="gray">
<div class="spriteshape-12"></div>
</div>
<div class="description"><span>Digestoře</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Vyhřívané">
<div class="option">
<div class="gray">
<div class="spriteshape-13"></div>
</div>
<div class="description"><span>Vyhřívané</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Chladící">
<div class="option">
<div class="gray">
<div class="spriteshape-14"></div>
</div>
<div class="description"><span>Chladící</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Transportní zařízení">
<div class="option">
<div class="gray">
<div class="spriteshape-15"></div>
</div>
<div class="description special"><span>Transportní zařízení</span></div>
</div>
</a></div>
</div>
</div>
</div>
CSS:
.page{
margin: 0 auto;
position: relative;
}
.header{
background-color: white;
min-height: 125px;
height: 100%;
}
.header .headerContainer{
max-width: 1800px;
width: 100%;
min-height: 125px;
height: 100%;
margin: 0 auto;
position: relative;
}
.header h1{
display: inline-block;
width: 249px;
height: 85px;
margin: 0;
margin-top: 21px;
margin-left: 28px;
float: left;
}
.header h1 span{
display: none;
}
.header ul{
padding: 0;
margin: 0;
}
.header .menu{
font-size: 15px;
font-weight: 600;
display: inline-block;
margin: 0;
position: relative;
top: 56px;
left: 122px;
float: left;
}
.header .menu li{
text-decoration: none;
display: inline-block;
margin-right: 46px;
}
.header .menu li:hover{
color: #00aab9;
border-bottom: 3px solid;
}
.header .menu li a{
text-decoration: none;
color: black;
}
.header .menu .active{
color: #00aab9;
border-bottom: 3px solid;
}
.header .contact{
font-family: 'Muli';
font-size: 15px;
font-weight: 400;
display: inline-block;
margin: 0;
position: relative;
top: 56px;
left: 404px;
float: left;
}
.header .contact li{
text-decoration: none;
display: inline-block;
color: #454545;
}
.header .contact li.first{
margin-right: 16px;
}
.header .contact li i{
font-size: 20px;
margin-right: 10px;
color: #00aab9;
}
.header .contact a{
text-decoration: none;
color: #454545;
}
.header .lang{
font-size: 15px;
font-weight: bold;
display: inline-block;
margin: 0;
position: relative;
top: 56px;
left: 474px;
float: left;
}
.header .lang li{
text-decoration: none;
display: inline-block;
}
.header .lang li.cz{
color: #00aab9;
margin-right: 16px;
}
.header .lang li.line{
margin-right: 19px;
color: #c0c0c0;
}
.header .lang li.sk{
color: #3b3b3b;
}
.header .lang li a{
text-decoration: none;
}
.header .lang li.cz a{
color: #00aab9;
}
.header .lang li.sk a{
color: #3b3b3b;
}
.categories{
min-height: 230px;
height: 100%;
background-color: #13bcca;
position: relative;
overflow: auto;
}
.categories .categoriesContainer{
max-width: 1800px;
width: 100%;
margin: 0 auto;
position: relative;
}
.categories .icons{
max-width: 1233px;
width: 100%;
margin: 0 auto;
min-height: 150px;
height: 100%;
padding-top: 36px;
}
.categories .optionlink{
height: 59px;
width: 175px;
display: inline-block;
margin-bottom: 29px;
float: left;
}
.categories .icons a{
text-decoration: none;
}
.categories .option{
height: 59px;
width: 175px;
display: inline-block;
margin-bottom: 29px;
float: left;
}
.categories .icons .white, .categories .icons .gray{
display: inline-block;
float: left;
line-height: 70px;
}
.categories .icons .white{
width: 59px;
height: 59px;
background-color: #fff;
border-radius: 50%;
text-align: center;
}
.categories .icons .gray{
width: 59px;
height: 59px;
background-color: #3a3c48;
border-radius: 50%;
text-align: center;
}
.categories .description{
margin-left: 72px;
line-height: 1px;
width: 69px;
text-align: left;
position: relative;
top: 21px;
}
.categories .special{
top: 14px;
}
.categories div span{
font-weight: bold;
color: white;
font-size: 13px;
text-align: left;
line-height: 16px;
}
It's looking like this now: https://imgur.com/a/iZOF5
And I need it look like this: https://imgur.com/a/SAQ5O
Any overflow doesn't work, the second picture has strict height, but I need it being adjusted according to size of window.
Does anybody know where is the problem? Thanks for solutions.
You need to update the categories class according to this:
.categories{
min-height: 230px;
height: 100%;
background-color: #13bcca;
position: relative;
overflow: auto;
width: 100%;
}
Specify the width attribute.
No need to change display attributes or something, you only need to update the width of the container. However, I recommend you to have only one container class and please avoid that "div" hell - it's really hard to read such a code (you probably don't need to have 5 nested div's in one block of code).

Bootstrap 3 column gutter

I tried to fix this problem multiple times but it still occurs, I just can't find the right fix.
I cannot create gutter around columns in Bootstrap 3. Here's my Fiddle: jsfiddle.net/creuxttL
My exact problem: When I create these three columns, I expect some gutter to be between them, so they don't look like one big brick. I don't get any gutter by default, so I tried to do it manually - with css class .col . I still don't get any margin/padding around the boxes. What should I do?
You're fiddle does not have bootstrap 3 included. http://jsfiddle.net/va94exo2/ is a slight modification.
Have wrapped all of your col-md-4 content with an inner div and changed the ID="row" to class and removed your extra .col class, have also then styled the inner div.
.inner-content{
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: white;
text-align: center;
background-color: #00b9ff;
border: 1px solid black;
}
.overlay-pic {
max-height: 200px;
display: block;
margin: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #44cbff;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.overlay p {
font-family: 'Raleway';
font-style: italic;
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.col {
/*gutter*/
padding-right: 7px;
padding-left: 7px;
}
.col:not(:first-child, :last-child) {
padding-right: 7px;
padding-left: 7px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="margin-top: 10px;">
<div class="col-md-4">
<div class="inner-content">
<h1>Festival 2001</h1>
<img src="event.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Our event.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="inner-content">
<h1>Who are we?</h1>
<img src="question.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Read more about us</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="inner-content">
<h1>where, when?</h1>
<img src="calendar.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Look at our calendar.</p>
</div>
</div>
</div>
</div>
</div>
Not positive this is exactly what you're looking for but if you just want space between the rows you can add a "margin-top" attribute to your css in the ".col-md-4" class.
Hope this helps.
.col-md-4 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: white;
text-align: center;
background-color: #00b9ff;
border: 1px solid black;
margin-top:10px;
}
.overlay-pic {
max-height: 200px;
display: block;
margin: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #44cbff;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.overlay p {
font-family: 'Raleway';
font-style: italic;
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.col {
/*gutter*/
padding-right: 7px;
padding-left: 7px;
}
.col:not(:first-child, :last-child) {
padding-right: 7px;
padding-left: 7px;
}
<div class="container">
<div id="row" style="margin-top: 10px;">
<div class="col-md-4 col">
<h1>Festival 2001</h1>
<img src="event.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Our event.</p>
</div>
</div>
<div class="col-md-4 col">
<h1>Who are we?</h1>
<img src="question.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Read more about us</p>
</div>
</div>
<div class="col-md-4 col">
<h1>where, when?</h1>
<img src="calendar.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Look at our calendar.</p>
</div>
</div>
</div>
</div>
Bootstrap is not added. I modified your code. And I hope you are expecting this.
.col {
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: white;
text-align: center;
background-color: white;
}
.overlay-pic {
max-height: 200px;
display: block;
margin: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #44cbff;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.overlay p {
font-family: 'Raleway';
font-style: italic;
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.col h1{
margin-top:0px;
}
<div class="container">
<div id="row">
<div class="col-md-4 col">
<div style="margin:5px; background:#00b9ff;border: 1px solid black;">
<h1>Festival 2001</h1>
<img src="event.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Our event.</p>
</div>
</div>
</div>
<div class="col-md-4 col">
<div style="margin:5px; background:#00b9ff;border: 1px solid black;">
<h1>Who are we?</h1>
<img src="question.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Read more about us</p>
</div></div>
</div>
<div class="col-md-4 col">
<div style="margin:5px; background:#00b9ff;border: 1px solid black;">
<h1>where, when?</h1>
<img src="calendar.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Look at our calendar.</p>
</div>
</div></div>
</div>
</div>

Styling Divs - Drop Shadow through the middle of other div

I'm trying to create CSS styles that LOOK like a flip counter but don't actually function as one. I've got the general look and feel figured out, but I can't seem to get my box-shadow to overlap the display number.
This is what I have so far:
.numberwrapper {
width: 50px;
height: 90px;
background-color: black;
border-radius: 5px;
position: relative;
display: inline-block;
}
.shadow {
width: 100%;
height: 50%;
z-index: 100;
box-shadow: 0px 5px 4px -2px #888888;
}
.number {
font-family: 'Tahoma', sans-serif;
top: -90;
color: #ffffff;
font-size: 85px;
line-height: 0px;
text-align: center;
}
.bigcomma {
font-family: 'Tahoma', sans-serif;
font-size: 85px;
color: black;
}
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
1
</div>
</div>
<span class="bigcomma">,</span>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
2
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
3
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
4
</div>
</div>
Like I said, my biggest issue is that I can't get my .shadow div to show up on top of the number.
Add "position: relative" to .shadow for the z-index to kick in:
.numberwrapper {
width: 50px;
height: 90px;
background-color: black;
border-radius: 5px;
position: relative;
display: inline-block;
}
.shadow {
width: 100%;
height: 50%;
z-index: 100;
box-shadow: 0px 5px 4px -2px #888888;
position: relative;
}
.number {
font-family: 'Tahoma', sans-serif;
top: -90;
color: #ffffff;
font-size: 85px;
line-height: 0px;
text-align: center;
}
.bigcomma {
font-family: 'Tahoma', sans-serif;
font-size: 85px;
color: black;
}
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
1
</div>
</div>
<span class="bigcomma">,</span>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
2
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
3
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
4
</div>
</div>