How to position overlay above the photo? - css

I am trying to make the overlap appear on top of the photo instead of under it. Here is a link to my test page - http://kaniamea.com/image.htm
How can I position this correctly and be responsive in the same time?
And here is the code:
<div align="center">
<div class="image-container"> <a href="link"><img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/activities/oahu_dinner.jpg" height="174" width="231">
<div class="after">This is some content</div>
</a> </div>
<div class="image-container"> <a href="link"><img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/activities/oahu_dinner.jpg" height="174" width="231">
<div class="after">This is some content</div>
</a> </div>
<div class="image-container"> <a href="link"><img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/activities/oahu_dinner.jpg" height="174" width="231">
<div class="after">This is some content</div>
</a> </div>
<style>
.image-container {
width:230px;
height:200px;
display:inline-block;
vertical-align:top;
margin-top:4px;
}
.image-container .after {
width:230px;
height:200px;
display:inline-block;
vertical-align:top;
margin-top:4px;
position:absolute;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
</style>

Related

how to fix element position and and make it responsive

I have a html, css and js:
$(document).ready(function() {
$('#friends-chats-noti-button').on("click", function(e, data) {
// TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
$('#friends-chats').fadeToggle('fast', 'linear', function() {
if ($('#friends-chats').is(':hidden')) {}
});
});
});
/* friends chats */
#friends-chats-container {
position:relative;
margin-right:10px;
margin-left:10px;
}
/* A CIRCLE LIKE BUTTON IN THE TOP MENU. */
#friends-chats-noti-button {
width:22px;
height:22px;
line-height:22px;
cursor:pointer;
}
/* THE NOTIFICAIONS WINDOW. THIS REMAINS HIDDEN WHEN THE PAGE LOADS. */
#friends-chats {
display:none;
width:900px;
top:55px;
right:10%;
background:#FFF;
border:solid 1px rgba(100, 100, 100, .20);
-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
z-index: 1000;
}
/* AN ARROW LIKE STRUCTURE JUST OVER THE NOTIFICATIONS WINDOW */
#notifications:before {
content: '';
display:block;
width:0;
height:0;
color:transparent;
border:10px solid #CCC;
border-color:transparent transparent #fff;
margin-top:-20px;
margin-left:345px;
}
#friends-chats:before {
content: '';
display:block;
width:0;
height:0;
color:transparent;
border:10px solid #CCC;
border-color:transparent transparent #fff;
margin-top:-20px;
margin-left:870px;
}
.messaging { padding: 0 0 50px 0;}
.msg_history {
height: 516px;
overflow-y: auto;
}
#chat-message-input-private
{
margin: 1% 0 1% 1%;
width: 80%;
height: 68px;
font-size: 18px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-right">
<li id="friends-chats-container">
<div id="friends-chats-noti-button">
<i class="fa fa-comments-o fa-2x" aria-hidden="true"></i>
</div>
<div>
<p> other element </p>
</div>
<div id="friends-chats">
<div class="container">
<h3 class=" text-center">Messaging</h3>
<div class="messaging">
<div class="inbox_msg">
<div class="inbox_people">
<div class="headind_srch">
<div class="recent_heading">
<h4>Recent</h4>
</div>
</div>
<div class="inbox_chat" id="inbox_chat">
</div>
</div>
<div class="mesgs">
<div class="msg_history" id="msg_history">
</div>
<div class="inputContainer">
<input id="chat-message-input-private" autocomplete="off" placeholder="Type your message...">
</div>
</div>
</div>
</div>
<!---->
</div>
</div>
</li>
</ul>
</nav>
<div>some element</div>
<div>some element</div>
<div>some element</div>
<div>some element</div>
<div>some element</div>
as you can see, there is a message icon on top-right side of the page.
what i want to get is
when click the message icon, the message window will pop out and don't impact other element's position.
when narrow the window, the message window can be responsive.
i already try several hours, but still haven't get good result, please help me. thanks everyone.

I think you forgot about adding the line position: abosolute;
I added it for you here. And I made the popup smaller so that you can see clearly
$(document).ready(function() {
$('#friends-chats-noti-button').on("click", function(e, data) {
// TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
$('#friends-chats').fadeToggle('fast', 'linear', function() {
if ($('#friends-chats').is(':hidden')) {}
});
});
});
/* friends chats */
#friends-chats-container {
position:relative;
margin-right:10px;
margin-left:10px;
padding: 0 15px;
}
/* A CIRCLE LIKE BUTTON IN THE TOP MENU. */
#friends-chats-noti-button {
width:22px;
height:22px;
line-height:22px;
cursor:pointer;
}
/* THE NOTIFICAIONS WINDOW. THIS REMAINS HIDDEN WHEN THE PAGE LOADS. */
#friends-chats {
display:none;
width:600px;
top:55px;
right:10%;
background:#FFF;
border:solid 1px rgba(100, 100, 100, .20);
-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
z-index: 1000;
position: absolute;
}
/* AN ARROW LIKE STRUCTURE JUST OVER THE NOTIFICATIONS WINDOW */
#notifications:before {
content: '';
display:block;
width:0;
height:0;
color:transparent;
border:10px solid #CCC;
border-color:transparent transparent #fff;
margin-top:-20px;
margin-left:345px;
}
#friends-chats:before {
content: '';
display:block;
width:0;
height:0;
color:transparent;
border:10px solid #CCC;
border-color:transparent transparent #fff;
margin-top:-20px;
margin-left:870px;
}
.messaging { padding: 0 0 50px 0;}
.msg_history {
height: 516px;
overflow-y: auto;
}
#chat-message-input-private
{
margin: 1% 0 1% 1%;
width: 80%;
height: 68px;
font-size: 18px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-right">
<li id="friends-chats-container">
<div id="friends-chats-noti-button">
<i class="fa fa-comments-o fa-2x" aria-hidden="true"></i>
</div>
<div>
<p> other element </p>
</div>
<div id="friends-chats">
<div class="container">
<h3 class=" text-center">Messaging</h3>
<div class="messaging">
<div class="inbox_msg">
<div class="inbox_people">
<div class="headind_srch">
<div class="recent_heading">
<h4>Recent</h4>
</div>
</div>
<div class="inbox_chat" id="inbox_chat">
</div>
</div>
<div class="mesgs">
<div class="msg_history" id="msg_history">
</div>
<div class="inputContainer">
<input id="chat-message-input-private" autocomplete="off" placeholder="Type your message...">
</div>
</div>
</div>
</div>
<!---->
</div>
</div>
</li>
</ul>
</nav>
<div>some element</div>
<div>some element</div>
<div>some element</div>
<div>some element</div>
<div>some element</div>

position overlaying div within another div

I've got some 'person' divs in a 'main' div. On 'person':hover I show an overlaying div. I want it appear only within the 'main' div, not go beyond 'main's boundaries.
This way:
When cursor over AGCH div
When cursor is over JALO div
I want Jack London's right border aligned with main's right border.
The complete example here: https://jsfiddle.net/yjdrnk9o/1/
HTML
<div id="main">
<div class="person">
<span class="short-name">WISH</span>
<div class="more">
<span>William</span>
<span>Shakespeare</span>
</div>
</div>
<div class="person">
<span class="short-name">AGCH</span>
<div class="more">
<span>Agatha</span>
<span>Christie</span>
</div>
</div>
<div class="person">
<span class="short-name">JALO</span>
<div class="more">
<span>Jack</span>
<span>London</span>
</div>
</div>
</div>
CSS
#main {
position: relative;
border: 1px solid;
width: 150px;
height: 100px;
}
.person {
float:left;
border:1px solid;
margin:1px 2px;;
}
.person:hover>.more {
display: block !important;
}
.more {
z-index:1;
position:absolute;
white-space: nowrap;
background-color:gray;
}
Thank you

Like this? https://jsfiddle.net/yjdrnk9o/3/
I added a class to your html to distinguish the last .person from the others and then said that the .more child of the .person.right element should be aligned to the right.
#main {
position: relative;
border: 1px solid;
width: 150px;
height: 100px;
}
.person {
float:left;
border:1px solid;
margin:1px 2px;;
}
.person:hover>.more {
display: block !important;
}
.more {
z-index:1;
position:absolute;
white-space: nowrap;
background-color:gray;
}
.person:last-of-type .more {
right: 0;
}
<div id="main">
<div class="person">
<span class="short-name">WISH</span>
<div style="display:none;" class="more">
<span>William</span>
<span>Shakespeare</span>
</div>
</div>
<div class="person">
<span class="short-name">AGCH</span>
<div style="display:none;" class="more">
<span>Agatha</span>
<span>Christie</span>
</div>
</div>
<div class="person on-right">
<span class="short-name">JALO</span>
<div style="display:none;" class="more">
<span>Jack</span>
<span>London</span>
</div>
</div>
</div>

use :last-of-type or :nth-of-type(3)
#main {
position: relative;
border: 1px solid;
width: 150px;
height: 100px;
}
.person {
float:left;
border:1px solid;
margin:1px 2px;;
}
.person:hover>.more {
display: block !important;
}
.more {
z-index:1;
position:absolute;
white-space: nowrap;
background-color:gray;
}
.person:last-of-type .more{
right: 0;
}
<div id="main">
<div class="person">
<span class="short-name">WISH</span>
<div style="display:none;" class="more">
<span>William</span>
<span>Shakespeare</span>
</div>
</div>
<div class="person">
<span class="short-name">AGCH</span>
<div style="display:none;" class="more">
<span>Agatha</span>
<span>Christie</span>
</div>
</div>
<div class="person">
<span class="short-name">JALO</span>
<div style="display:none;" class="more">
<span>Jack</span>
<span>London</span>
</div>
</div>
</div>

CSS boarders on floating divs

enter link description hereI have a set 8 floated divs, each taking 25% width (and having another div and img inside), so they line up in two rows.
<div class="galleryboard" id="gallery3">
<div class="view view-first">
<img src="img/galleries/3/thumb/1.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/2.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/3.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/4.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/5.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/6.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/7.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/8.jpg">
<div class="mask">
Enlarge
</div>
</div>
</div>
I want to add only the inner borders to all floats by manually picking each float by css, like so:
.view:nth-child(1) {
border-left:none
}
.view:nth-child(5) {
border-left:none
}
.view:nth-child(4) {
border-right:none
}
.view:nth-child(8) {
border-right:none
}
.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(4) {
border-top:none;
}
.view:nth-child(5), .view:nth-child(6), .view:nth-child(7), .view:nth-child(8) {
border-bottom:none;
}
but somehow, I'm getting the borders of 2nd, 3rd, 6th and 7th float all wrong - see it here
jsfiddle
the divs are styled here
.view {
width: 25%;
box-sizing:border-box;
float: left;
overflow: hidden;
position: relative;
text-align: center;
border:3px solid blue
}
.view .mask, .view .content {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
width:100%;
height:auto;
}
and apparently the problem is caused by the img having its width set to 100%. Can you find a solution to have my inner borders all the same size? Thanks

Try
Remove all child styling and apply following
.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(5), .view:nth-child(6), .view:nth-child(7) {
border-right: medium none;
}
.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(4) {
border-bottom: medium none;
}
In the .view i have just added height or pass the height dynamicaly
.view {
border: 3px solid blue;
box-sizing: border-box;
float: left;
**height: 240px;**
overflow: hidden;
position: relative;
text-align: center;
width: 25%;
}

Line up Text to top of Image in divs

I'd like to line up the text to the top of the images in my divs.
Currently the title: Webinar, Blog, etc are sitting below the top of the squares. I have a style in there: vertical-align: top; but it's not aligning to the top of the square.
See my Fiddle - http://jsfiddle.net/huskydawgs/e9pZr/
HTML
<div id="wrapper-resources">
<div id="resources_row">
<div class="resources_cell1">
<div class="resources_lt">
<img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div>
<div class="resources_rt">
<p><strong>Webinar</strong></p>
</div>
</div>
<div class="resources_cell2">
<div class="resources_lt">
<img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div>
<div class="resources_rt">
<p><strong>Article</strong></p>
</div>
</div>
<div class="resources_cell3">
<div class="resources_lt">
<img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div>
<div class="resources_rt">
<p><strong>Blog</strong></p>
</div>
</div>
<div class="resources_cell4">
<div class="resources_lt">
<img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div>
<div class="resources_rt">
<p><strong>Market</strong></p>
</div>
</div>
</div>
</div>
CSS
#wrapper-resources {
position:relative;
width:100%;
border: none;
margin: 50px 0 0 0;
}
#resources_row {
height:100%;
white-space:nowrap;
}
.resources_cell1, .resources_cell2, .resources_cell3, .resources_cell4 {
height:100%;
width:25%;
display:inline-block;
white-space:normal;
}
.resources_lt {
height:100%;
width:33%;
display:inline-block;
white-space:normal;
margin-right: 20px;
vertical-align: top;
}
.resources_rt {
height:100%;
width:50%;
display:inline-block;
white-space:normal;
vertical-align: top;
}
/* Fonts */
#wrapper-resources p {
color: #666666;
font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
font-size: .9em;
line-height: 1.6em;
}

you need to reset margin to 0 for your <p> http://jsfiddle.net/e9pZr/3/
it has by default margin:1em 0; see http://reference.sitepoint.com/css/collapsingmargins for more explanations.

How to layout divs as specified?

Please help me to create layout as specified on image below.
I have tried to achieve it but my knowledge of CSS is not enough and layout has to be done ASAP... I tried to play with CSS attributes like float, overflow, position:absolute, relative, etc but results were disappointing - divs overflow with each other, don't position properly and so on. Each div contains a lot of content - other divs, images, lists, etc.
Desired result:

<div style="float: left; width: 100px; height: 200px; background: #f00;">content...</div>
<div style="float: right; width: 200px; height: 300px; background: #0f0;">content...</div>
<div style="clear: both;"></div>
<div style="float: right; width: 100px; height: 300px; background: #00f;">content...</div>
<div style="clear: both;"></div>
<div style="float: right; width: 500px; height: 200px; background: #ff0;">content...</div>
<div style="clear: both;"></div>
<div style="width: 100%; height: 100px; background: #000;">content...</div>

<body>
<div class="box">
<div class="red">
</div>
<div class="green">
</div>
</div>
<!-- -->
<div class="box">
<div class="blue">
</div>
</div>
<!-- -->
<div class="box">
<div class="yellow">
</div>
</div>
<!-- -->
<div class="box">
<div class="black">
</div>
</div>
</body>
.box{
width:400px;
clear:both;
height:400px;
margin-top:10px;
}
.yellow{
background:yellow;
width:40%;
height:100%;
float:right;
}
.black{
background:black;
width:80%;
height:20%;
float:right;
}
.blue{
background:blue;
width:20%;
height:100%;
float:right;
}
.red{
background:red;
width:30%;
height:60%;
float:left;
}
.green{
background:green;
width:60%;
height:90%;
float:left;
margin-left:10%;
}

Resources