Develop Reference

How do I fix the Notification box caret?

I have created a messages notification using Bootstrap dropdown. If you see I have added a caret to represent that the caret belongs to the message icon now when I'm normally checking including the responsive design the caret moves away from the message notification icon.
I want the caret to be fixed under the messages icon in any design including mobile devices.
Can someone help me with this issue, please?
P.S: I tried adding right Bootstrap files but it seems like I was not been able to add them that's why I'm leaving a JS fiddle link too!
.top-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
background: #FFFFFF;
width: 100%;
float: left;
height: 50px;
}
.top-head h1 {
color: #fff;
font-size: 26px;
font-weight: 600;
line-height: 50px;
margin-bottom: 0px;
}
.top-menu-right {
float: right;
}
.top-head .user-bar {
text-align: right;
float: right;
}
.top-head .user-bar a {
color: rgba(0, 0, 0, .7);
font-size: 15px;
font-weight: 400;
line-height: 49px;
position: relative;
padding: 0 7px;
}
.top-head .user-bar a:hover {
color: #02b875;
}
.top-head .user-bar a i {
margin-right: 6px;
}
.top-head .user-bar .ping {
background: #02b875;
border-radius: 50%;
height: 10px;
position: absolute;
right: 9px;
top: 13px;
width: 10px;
z-index: 1;
}
.top-head .user-bar img {
float: left;
height: 32px;
width: 32px;
margin-top: 9px;
}
/* DROPDOWN MENU */
.dropbtn {
color: rgba(0, 0, 0, .7);
padding: 13px 7px;
font-size: 15px;
border: none;
margin-top: 0px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 180px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
float: left;
text-align: left;
}
.dropdown-content a {
text-decoration: none;
display: block;
padding: 10px 25px 10px 15px !important;
line-height: 1.42857 !important;
}
.dropdown-content a:hover {
color: #02b875;
text-decoration: none;
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #fff;
color: #02b875;
}
.dropdown-divider {
height: 0;
margin: 0px;
overflow: hidden;
border-top: 1px solid #e9ecef;
}
.dropdown-menu-arrow {
top: -25px;
left: 27.2%;
width: 0;
height: 0;
position: relative;
}
.dropdown-menu-arrow:before,
.dropdown-menu-arrow:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-width: 11px 12px;
border-style: solid;
border-color: transparent;
z-index: 1001;
}
.dropdown-menu-arrow:after {
bottom: -17px;
right: -8px;
border-bottom-color: #fff;
}
.dropdown-menu-arrow:before {
bottom: -16px;
right: -8px;
border-bottom-color: rgba(0, 0, 0, .15);
}
/* ========== Navigation Start ========== */
.account-name {
font-weight: 600;
}
/* NOTIFICATION */
.notification {
color: rgba(0, 0, 0, .7) !important;
font-size: 17px !important;
}
.notification:hover,
.messages:hover {
color: #183247;
}
.notification-imp {
font-weight: 600;
color: #1d2129;
}
.messages {
color: rgba(0, 0, 0, .7) !important;
font-size: 17px !important;
margin-left: -5px !important;
}
/* Message DropBox*/
.message-box {
min-width: 430px;
background-color: #fff;
padding-bottom: 0px;
border-radius: 0px;
border: 1px solid #e2e2e2 !important;
position: absolute !important;
margin-left: -99px;
top: -1px !important;
z-index: 1001;
}
/* Message Heading */
.message-box .msg-title {
border-bottom: 1px solid #e2e2e2;
padding: 0px 15px 8px 15px;
font-size: 13px;
}
/* Message Notification */
.messages-noti {
font-weight: 600;
}
/* Message Content */
.message-box .msg-box-content {
min-height: 380px;
max-height: 280px;
overflow-y: scroll;
z-index: 1001;
}
/* Message Image Container */
.msg-box-content .msg-img {
float: left;
display: inline-block;
width: 55px;
height: 45px;
margin: 0px 0px 8px 0px;
}
/* Messsage Image */
.msg-box-content .msg-img img {
width: 40px;
height: 40px;
}
.message-box .msg-box-content a {
display: block;
font-size: 13px;
font-weight: 600;
padding-top: 10px;
padding-bottom: 5px;
padding-right: 17px;
padding-left: 0px;
line-height: inherit;
border-bottom: 1px solid #e2e2e2;
}
.message-box .msg-box-content a:hover {
color: rgb(0, 0, 0, .7);
background-color: #fafafa;
text-decoration: none;
}
.message-box .msg-box-content .pd-l0 {
padding-left: 0px;
}
/* Message box scroller hides */
.message-box .msg-box-content::-webkit-scrollbar,
.message-box .msg-box-content::-webkit-scrollbar-thumb {
display: none;
}
.message-box .msg-box-content p {
font-size: 13px;
color: #1d2129;
font-weight: normal;
margin: 1px 0px 8px 0px;
}
.message-box .msg-box-content p.time {
font-size: 12px;
font-weight: 600;
margin: 0px -55px 0px 0px;
position: relative;
display: inline-block;
color: #90949c;
}
/* Unread Notification */
.message-box .msg-box-content>a:nth-child(2n+0) {
background-color: #fafafa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="top-head fixed-top">
<div class="container container-responsive">
<div class="row">
<div class="col-md-10 col-lg-9 user-bar">
<div class="top-menu-right">
<nav class="nav nav-inline">
Register
Login
<!-- START OF MESSAGES NOTIFICATIONS -->
<div class="dropdown">
<span class="ping"></span><i class="far fa-comment-alt"></i>
<div class="dropdown-menu message-box">
<span class="dropdown-menu-arrow"></span>
<div class="msg-title">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">Messages (<span class="messages-noti">4</span>)</div>
</div>
</div>
<div class="msg-box-content">
<!-- Message Block -->
<a href="subscription.php">
<!-- User Image -->
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<!-- User Name -->
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<!-- Timestamp -->
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<!-- User Message -->
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
<a href="subscription.php">
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
<a href="subscription.php">
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
</div>
</div>
</div>
<!-- END OF MESSAGES NOTIFICATIONS -->
</nav>
<!-- END OF NAV BAR -->
</div>
<!-- END OF TOP MENU RIGHT -->
</div>
<!-- END OF COLUMN USER-BAR -->
</div>
<!-- END OF ROW -->
</div>
<!-- END OF CONTAINER -->
</div>
<!-- END OF NAVIGATION -->
https://jsfiddle.net/dmronev0/

Mostly HTML Devs have this issue, but the solution it's very simple you don't need to add arrow icon in your hidden container. You should add arrow icon in the bottom of the button where you click/hover. It will not disturb the UI. I just update your code with few changes i hope it'll help you out. Thanks
.top-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
background: #FFFFFF;
width: 100%;
float: left;
height: 50px;
}
.top-head h1 {
color: #fff;
font-size: 26px;
font-weight: 600;
line-height: 50px;
margin-bottom: 0px;
}
.top-menu-right {
float: right;
}
.top-head .user-bar {
text-align: right;
float: right;
}
.top-head .user-bar a {
color: rgba(0, 0, 0, .7);
font-size: 15px;
font-weight: 400;
line-height: 49px;
position: relative;
padding: 0 7px;
}
.top-head .user-bar a:hover {
color: #02b875;
}
.top-head .user-bar a i {
margin-right: 6px;
}
.top-head .user-bar .ping {
background: #02b875;
border-radius: 50%;
height: 10px;
position: absolute;
right: 9px;
top: 13px;
width: 10px;
z-index: 1;
}
.top-head .user-bar img {
float: left;
height: 32px;
width: 32px;
margin-top: 9px;
}
/* DROPDOWN MENU */
.dropbtn {
color: rgba(0, 0, 0, .7);
padding: 13px 7px;
font-size: 15px;
border: none;
margin-top: 0px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 180px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
float: left;
text-align: left;
}
.dropdown-content a {
text-decoration: none;
display: block;
padding: 10px 25px 10px 15px !important;
line-height: 1.42857 !important;
}
.dropdown-content a:hover {
color: #02b875;
text-decoration: none;
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #fff;
color: #02b875;
}
.dropdown-divider {
height: 0;
margin: 0px;
overflow: hidden;
border-top: 1px solid #e9ecef;
}
.dropdown-menu-arrow {
display: none;
bottom: 16px;
left: 20px;
position: absolute;
z-index: 1002;
}
.dropdown-menu-arrow:before,
.dropdown-menu-arrow:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-width: 11px 12px;
border-style: solid;
border-color: transparent;
z-index: 1001;
}
.dropdown-menu-arrow:after {
bottom: -17px;
right: -8px;
border-bottom-color: #fff;
}
.dropdown-menu-arrow:before {
bottom: -16px;
right: -8px;
border-bottom-color: rgba(0, 0, 0, .15);
}
/* ========== Navigation Start ========== */
.account-name {
font-weight: 600;
}
/* NOTIFICATION */
.notification {
color: rgba(0, 0, 0, .7) !important;
font-size: 17px !important;
}
.notification:hover,
.messages:hover {
color: #183247;
}
.notification-imp {
font-weight: 600;
color: #1d2129;
}
.messages {
color: rgba(0, 0, 0, .7) !important;
font-size: 17px !important;
margin-left: -5px !important;
}
/* Message DropBox*/
.message-box {
min-width: 430px !important;
background-color: #fff;
padding-bottom: 0px;
border-radius: 0px;
border: 1px solid #e2e2e2 !important;
position: absolute !important;
margin-left: -99px;
top: 42px !important;
z-index: 1001;
}
/* Message Heading */
.message-box .msg-title {
border-bottom: 1px solid #e2e2e2;
padding: 0px 15px 8px 15px;
font-size: 13px;
}
/* Message Notification */
.messages-noti {
font-weight: 600;
}
/* Message Content */
.message-box .msg-box-content {
min-height: 380px;
max-height: 280px;
overflow-y: scroll;
z-index: 1001;
}
/* Message Image Container */
.msg-box-content .msg-img {
float: left;
display: inline-block;
width: 55px;
height: 45px;
margin: 0px 0px 8px 0px;
}
/* Messsage Image */
.msg-box-content .msg-img img {
width: 40px;
height: 40px;
}
.message-box .msg-box-content a {
display: block;
font-size: 13px;
font-weight: 600;
padding-top: 10px;
padding-bottom: 5px;
padding-right: 17px;
padding-left: 0px;
line-height: inherit;
border-bottom: 1px solid #e2e2e2;
}
.message-box .msg-box-content a:hover {
color: rgb(0, 0, 0, .7);
background-color: #fafafa;
text-decoration: none;
}
.message-box .msg-box-content .pd-l0 {
padding-left: 0px;
}
/* Message box scroller hides */
.message-box .msg-box-content::-webkit-scrollbar,
.message-box .msg-box-content::-webkit-scrollbar-thumb {
display: none;
}
.message-box .msg-box-content p {
font-size: 13px;
color: #1d2129;
font-weight: normal;
margin: 1px 0px 8px 0px;
}
.message-box .msg-box-content p.time {
font-size: 12px;
font-weight: 600;
margin: 0px -55px 0px 0px;
position: relative;
display: inline-block;
color: #90949c;
}
.dropdown.show .dropdown-menu-arrow {
display: block;
}
/* Unread Notification */
.message-box .msg-box-content>a:nth-child(2n+0) {
background-color: #fafafa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="top-head fixed-top">
<div class="container container-responsive">
<div class="row">
<div class="col-md-10 col-lg-9 user-bar">
<div class="top-menu-right">
<nav class="nav nav-inline">
Register
Login
<!-- START OF MESSAGES NOTIFICATIONS -->
<div class="dropdown">
<a href="#" class="nav-link messages" data-toggle="dropdown">
<span class="ping"></span>
<i class="far fa-comment-alt"></i>
<span class="dropdown-menu-arrow"></span>
</a>
<div class="dropdown-menu message-box">
<div class="msg-title">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">Messages (<span class="messages-noti">4</span>)</div>
</div>
</div>
<div class="msg-box-content">
<!-- Message Block -->
<a href="subscription.php">
<!-- User Image -->
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<!-- User Name -->
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<!-- Timestamp -->
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<!-- User Message -->
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
<a href="subscription.php">
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
<a href="subscription.php">
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
</div>
</div>
</div>
<!-- END OF MESSAGES NOTIFICATIONS -->
</nav>
<!-- END OF NAV BAR -->
</div>
<!-- END OF TOP MENU RIGHT -->
</div>
<!-- END OF COLUMN USER-BAR -->
</div>
<!-- END OF ROW -->
</div>
<!-- END OF CONTAINER -->
</div>
<!-- END OF NAVIGATION -->

Adjust element the same height as container panel

I have a container panel which has the possibility to expand. Inside the container panel I have an element which I want to adjust it the same height when expanded and when not expanded. How can I do it?
.container {
border: 1px solid rgba(0, 0, 0, 0.87);
width: 895px;
position: relative;
display: inline-block;
padding-bottom: 8rem;
top: 60px;
}
.imageAdj {
object-fit: cover;
width: inherit;
height: inherit;
border: 1px solid rgba(0, 0, 0, 0.87);
float: left;
}
<div className="secrets-config">
<div>
<p>Blah blah blah</p>
<Image className="imageAdj ">
</div>
</div>

First of all the use of className is only valid in JavaScript files.
Same goes for Image.
what you did was mostly correct only because you used padding-bottom: 8rem; it will never fill the whole space under your .element.
if you want your child element (.element) to be able to use height: 100%; you need to specify height in your parent element (.container)
.container {
display: inline-block;
width: 895px;
height: auto;
//padding-bottom: 8rem;
position: relative;
top: 60px;
border: 1px solid rgba(0, 0, 0, 0.87);
}
.element {
display: block;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.87);
}
<div class="container">
<div class="element">
<img src="link/to/file.png">
<p>context text</p>
</div>
</div>

How can I grey out page except for one element?

How can I make a greyed out overlay on a page, but have one element in that page not greyed out?
There are many questions like this asked but none of them work:
Hide all elements except one div for print view - This one does not work for my situation as I do not want to hide everything.
Disable everything except a DIV element - This one the second answer seems similar to mine. But even if I change z-index of my desired ungreyed out element the whole page stays greyed out. Also, I found no difference between using div and iframe.
Want to make the whole page in grayscale except specified div - This one just makes everything else greyscale but I do not want that.
From the example below I want everything greyed out except for <input class="edit-title" value="Site Title">. Right now my code greys out most of the page, I can grey out the whole page if I change
.overlay {
z-index: -1;
}
to
.overlay {
z-index: 0;
}
Is there a way to grey out everything except <input class="edit-title" value="Site Title">?
html {
box-sizing: border-box;
}
.overlay {
top: 0;
bottom: 0;
right: 0;
left: 0;
position: absolute;
background: rgba(0, 0, 0, .4);
z-index: -1;
}
edit-title {
z-index: 100;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body,
input,
optgroup,
select,
textarea {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
body {
font-size: 13px;
line-height: 1.4;
color: #555;
margin: 0;
padding: 0;
background: white;
overflow-x: hidden;
}
.button {
font-weight: bold;
color: #fff;
border: 1px solid #44aa76;
border-width: 0 0 3px 0;
background-color: #66cc98;
padding: 5px;
border-radius: 6px;
text-align: center;
}
.button:focus,
.button:hover,
.active {
cursor: pointer;
background-color: #44aa76;
color: #fff;
outline: none;
}
header {
width: 100%;
border-bottom: 1px solid #eee;
display: flex;
justify-content: center;
padding: 30px 0 10px;
margin-bottom: 10px;
}
input {
font-size: 13px;
border: 1px solid #eee;
border-radius: 4px;
padding: 8px;
}
input:focus {
outline: none;
border-color: #ddd;
}
[type="search"] {
-webkit-appearance: textfield;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.search {
display: flex;
align-items: center;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.search input[type="search"] {
width: 100%;
}
label {
font-size: 13px;
margin-right: 5px;
}
.save-button {
width: 30px;
height: 30px;
line-height: 27px;
padding: 0;
margin: 0 10px;
}
h1 {
margin: 0;
padding: 0;
line-height: 1;
font-size: 22px;
padding: 4px 0;
}
.container {
position: relative;
padding: 0 15px;
width: 360px;
max-width: 100%;
margin: 0;
}
.reading-list {
margin-bottom: 15px;
}
.reading-item {
border-radius: 3px;
padding: 0;
margin: 10px 0 0 0;
background-color: #f7f7f7;
position: relative;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.05);
transition: all 0.5s ease 0s;
}
.reading-item .item-link {
text-decoration: none;
display: block;
width: 100%;
color: #555;
padding: 10px 50px 10px 56px;
min-height: 56px;
}
.reading-item .item-link:focus,
.reading-item .item-link:hover {
color: #66cc98;
background-color: #fff;
}
.reading-item .item-link span {
display: block;
}
.reading-item .item-link span.title {
font-weight: bold;
}
.reading-item .favicon {
position: absolute;
top: 10px;
left: 10px;
width: 36px;
height: 36px;
border-radius: 4px;
border: 1px solid #ccc;
padding: 1px;
}
.reading-item .item-link:hover .favicon {
border-color: #66cc98;
}
.reading-item .delete-button {
position: absolute;
top: 5px;
right: 5px;
border-radius: 100%;
padding: 0;
width: 20px;
height: 20px;
border: 0;
background-color: transparent;
color: #ccc;
transform: rotateZ(0) scale(1);
transition: transform 0.3s ease, box-shadow 0.5s ease;
}
.reading-item .edit-button,
.reading-item .save-button {
position: absolute;
bottom: 10px;
right: 10px;
padding: 0;
width: 10px;
height: 10px;
border: 0;
background-color: transparent;
color: #ccc;
border-radius: 0;
margin: 0;
}
.reading-item .delete-button:hover {
background-color: #ccc;
color: #fff;
transform: rotateZ(90deg) scale(2);
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15);
}
<body class="popup-page">
<div class="container">
<header>
<h1 data-localize="appName">Reading List</h1>
<button class="button save-button" id="savepage">+</button>
</header>
<div class="search">
<label for="my-search" data-localize="search">Search</label>
<input type="search" id="my-search" name="search" autocomplete="off">
</div>
<div class="reading-list" id="reading-list">
<div class="reading-item read">
<a value="www.example.com" class="button delete-button">×</a>
<a class="item-link" href="www.example.com" alt="Reading List">
<input class="edit-title" value="Site Title">
<span class="host">example.com</span>
</a>
<img src="/icons/save.svg" class="button save-button"></div>
</div>
</div>
<div class="overlay" id="overlay"></div>
</body>
https://jsfiddle.net/qyca9489/

Can do it using css box-shadow.
.box{display:inline-block; width:100px; height:100px; margin-top:50px; text-align:center; padding-top:2em}
.box.selected{
box-shadow: 0 0 0 99999px rgba(0, 0, 0, .5);
}
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box selected">Box 3</div>
<div class="box">Box 4</div>
Alternate solution using 4 overlay elements
Overlays are positioned based on highlighted element position and dimensions.
The top and bottom overlays are 100% width. The top one just needs it's height set to value of top offset of highlighted element. Bottom one gets it's top set to bottom of the element.
Right and left are same height as highlighted element and reach to each edge of page to fill holes between the top and bottom overlays
var $el = $('.box.selected'),
$oLay = $('.overlay'),
elPos = $el.offset(),// coordinates of element within document
elH = $el.height(),
elW = $el.width();
$oLay.filter('.top').height(elPos.top);
$oLay.filter('.left').css({
top: elPos.top,
height: elH,
width: elPos.left
});
$oLay.filter('.right').css({
top: elPos.top,
height: elH,
left: elPos.left + elW
});
$oLay.filter('.bottom').css({
top: elPos.top + elH
});
.box {
display: inline-block;
width: 100px;
height: 100px;
margin-top: 50px;
text-align: center;
padding-top: 2em
}
.overlay {
position: absolute;
background: rgba(0, 0, 0, .5);
z-index: 100
}
.overlay.top {
top: 0;
left: 0;
width: 100%
}
.overlay.left {
left: 0
}
.overlay.right {
right: 0
}
.overlay.bottom {
width: 100%;
left: 0;
bottom: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box selected">Box 3</div>
<div class="box">Box 4</div>
<div class="overlay top"></div>
<div class="overlay left"></div>
<div class="overlay right"></div>
<div class="overlay bottom"></div>

You could put a second overlay inside <a class="item-link" href="www.example.com" alt="Reading List">. So:
<a class="item-link" href="www.example.com">
<div class="overlay"></div>
…
</a>
And in the CSS:
.item-link {
position: relative
}

How can I horizontally center 3 divs?

So I have 3 cards that I am going to put my projects inside, and I need them to be perfectly centered horizontally. I have tried many things but none have worked so far.
Here is the code for the cards.
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
cursor: pointer;
}
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>

Just use flexbox. Make a container for the cards and put display: flex; on it and then justify-content: center to center them no matter the size of the new container div
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
cursor: pointer;
}
.card-container {
display: flex;
justify-content: center;
}
<div class="card-container">
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>
</div>

Using flexbox this is easy. On the element that contains your divs just add display: flex; and justify-content: center;:
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
cursor: pointer;
}
body {
display: flex;
justify-content: center;
}
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>

Create a parent with text-align: center
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
cursor: pointer;
}
.parent {
text-align: center;
}
<div class="parent">
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>
</div>

Use translateX and left rules to position them.
.card {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 290px;
overflow: hidden;
opacity: 1;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.card .topImage {
display: inline-flex;
width: 100%;
height: 220px;
overflow: hidden;
align-content: center;
}
.topImage {
background-color: rgba(0, 0, 0, .3);
}
.card .topImage img {
height: 220px;
}
.card .bottom {
height: 80px;
width: 100%;
}
.card .bottom p {
text-align: left;
height: 80px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-left: 20px;
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-size: 18px;
font-family: Roboto, sans-serif;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
cursor: pointer;
}
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 1</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 2</p>
</div>
</div>
<div class="card card-1">
<div class="topImage">
</div>
<div class="bottom">
<p>Project 3</p>
</div>
</div>

Bxslider, image in firefox is not centered

I'm trying to create a simple slider on a homepage using bxslider plugin. The slider works perfectly in Chrome and IE, but in Firefox image is not centered, it goes 50% on the right.
I really can't figure out, what is the problem here. Image size is 1027x360px.
Here is my code:
<div class="slider">
<div class="container slider-width">
<ul class="bxslider">
<li>
<img src="img/slider/banner.png" />
<div class="offers" id="offers_0">
<h2>> Capition text</h2>
</div>
</li>
<li>
<img src="img/slider/banner.png" />
<div class="offers" id="offers_1">
<h2>> Capition text</h2>
</div>
</li>
<li>
<img src="img/slider/banner.png" />
<div class="offers" id="offers_2">
<h2>> Capition text</h2>
</div>
</li>
</ul>
</div>
CSS code:
.slider {
width: 100%;
height: 360px;
position: relative;
margin: -12px auto 0px auto;
padding: 0;
text-align: center;
background: #f58d24;
}
.slider-width {
min-width: 1027px;
margin: 0 auto;
}
.bx-wrapper .bx-pager {
top: 340px;
}
.bx-wrapper img {
display: block;
width: 1027px;
height: 360px;
}
.offers {
position: absolute;
z-index: 1000;
top: 80px;
left: 0px;
text-align: left;
}
.offers h2 {
background: none;
font-family: "plavskyregular";
padding: 10px 0px 10px 30px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
text-shadow: 1px 1px 0px #fff;
color: #343434;
margin: 0px;
font-size: 36px;
font-weight: bold;
}