We Keep Coding

CSS: Adding Hover Overlay causes div to appear at the top of the screen as well

I'm working with a CSS Overlay for an image, trying to get text to display when the image is hovered. I have it working, but for some reason, the text is also all appearing as a blob above the gallery. I think it's to do with the position tag I'm using, but I'm not sure how to reproduce exactly. Code below + CSB:
https://codesandbox.io/s/eager-moore-qeki7
gallery
{
data.map((edge) => (
<div key={edge} className={styles.imgHov}>
<Img
fluid={edge.node.data.one}
className={styles.image}
/>
<div className={styles.overlay} key={edge}>
<p className={styles.text}>{edge.node.data.item_one}</p>
<p className={styles.text}>{edge.node.data.item_two}</p>
</div>
</div>
))
}
css
.imgHov:hover{
position: relative;
}
.image{
width: 25vw;
height: 25vw;
object-fit: cover;
}
.overlay{
position: absolute;
z-index: 999;
margin: 0 0;
left: 0;
right: 0;
top: 40%;
width: 60%;
background-color: pink;
height: 60%;
width: 25vw;
}
.overlay .text{
color: white;
font-family: Geomanist;
}

I translated your app in normal HTML, i think this should meet your requirements :)
.imgHov{
position: relative;
width: 25vw;
height: 25vw;
}
.image{
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay{
display: none;
position: absolute;
z-index: 999;
margin: 0 0;
left: 0;
right: 0;
top: 40%;
width: 60%;
background-color: pink;
height: 60%;
width: 25vw;
}
.overlay .text{
color: white;
font-family: Geomanist;
}
.imgHov:hover .overlay {
display: block;
}
<div class="imgHov">
<img class="image" src="https://static.scientificamerican.com/sciam/cache/file/92E141F8-36E4-4331-BB2EE42AC8674DD3_source.jpg"/>
<div class="overlay">
<p class="text">item one</p>
<p class="text">item two</p>
</div>
</div>

two divs inside a container ovelayed

I have a container DIV that has two DIVs inside. The first DIV (my-canvas) needs to be positioned absoulte at 0 0 inside the container. I want the second DIV to take up the remaining 50% of space below. The finished product needs to be responsive. I am stuck on how to position the second DIV.
I have the following HTML:
<div class="container map-container">
#include('maps.world-map')
<div id="my-canvas"></div>
<div id="their-canvas"></div>
</div>
My CSS is:
.map-container {
position: relative;
display: inline-block;
width: 100%;
max-width: 1728px;
max-height: 1080px;
overflow: hidden;
margin: 50px auto 0 auto;
}
#my-canvas,
#their-canvas {
padding: 0;
text-align: center;
position: absolute;
max-width: 1728px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 999998;
opacity: 0.8;
}
#my-canvas {
left: 0;
top: 0;
}
I am trying to figure out the CSS for the canvas below
#their-canvas {
????
}
Thanks!

You can set second div using botton:0px, height: 50%;. check updated snippet below
$('.map-container').height($(window).height()-55);
$(window).resize(function(){
$('.map-container').height($(window).height()-55);
})
body {
padding: 0px;
margin: 0px;
}
.map-container {
position: relative;
display: inline-block;
width: 100%;
max-width: 1728px;
max-height: 1080px;
overflow: hidden;
margin: 50px auto 0 auto;
}
#my-canvas,
#their-canvas {
padding: 0;
text-align: center;
position: absolute;
max-width: 1728px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 999998;
opacity: 0.8;
}
#my-canvas {
left: 0;
top: 0;
background: red;
}
#their-canvas {
height: 50%;
bottom: 0px;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container map-container">
<div id="my-canvas">my-canvas</div>
<div id="their-canvas">their-canvas</div>
</div>

It is unclear what you mean by "it needs to be responsive".
But if you want to put your second canvas below, you can set a top: 50%; property. Since you are using relative values for the height and top of your canvas, its parent needs to have a defined height or min-height
See https://jsfiddle.net/NotANumber/3k2go0qf/

Try following code, Using CSS itself you can achieve,
*{
padding:0px;
margin:0px;
}
.map-container {
position: absolute;
display: block;
width: 100%;
max-width: 1728px;
max-height: 1080px;
height:100%;
}
#my-canvas,
#their-canvas {
text-align: center;
position: absolute;
max-width: 1728px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 999998;
opacity: 0.8;
}
#my-canvas {
background: red;
}
#their-canvas {
bottom: 0px;
background: green;
}
<div class="container map-container">
<div id="my-canvas"></div>
<div id="their-canvas"></div>
</div>

CSS - Empty colored container relative to size of parent container

I've got a header on my webpage that changes height based on the viewport (eg. 15vh) and has a min-height of 50px.
I'd like to make a colored square within this header that is always exactly 50% of the height of the header regardless of the user's viewport. There will be no content in the colored box. It is for style purposes only. I know that I can't use height: 15%; as there is no content in the container and, as a result, nothing will be displayed. I can't define the box in terms of viewport units because the header isn't always 15% of the height of the viewport (due to the min-height assignment).
Is there any way to accomplish this with CSS?
Here's my setup:
html,
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
.header {
position: relative;
background-color: grey;
border-bottom: 1px solid #CCC;
min-height: 50px;
}
.responsivecontainer {
float: left;
max-width: 20vw;
min-height: 50px;
display: flex;
}
.logo {
margin: auto 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.box {
float: left;
height: 50%;
background-color: black;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
/* #end */
<div class="header clearfix">
<div class="responsivecontainer">
<div class="logo">
<img src="http://www.bluebean.ca/logo1.jpg">
</div>
</div>
<div class="box">
<img src="http://www.bluebean.ca/grey.jpg">
</div>
</div>

You can do this with absolute positioning. Like this :
html,
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
.header {
position: relative;
background-color: grey;
border-bottom: 1px solid #CCC;
min-height: 50px;
position: relative;
}
.responsivecontainer {
float: left;
max-width: 20vw;
min-height: 50px;
display: flex;
}
.logo {
margin: auto 0;
z-index:10;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.box {
position:absolute;
top:0;
left:0;
height: 50%;
background-color: black;
width: 100%;
}
<div class="header clearfix">
<div class="box"></div>
<div class="responsivecontainer">
<div class="logo">
<img src="http://www.bluebean.ca/logo1.jpg">
</div>
</div>
</div>
You will also need to set z-index value greater than that of box to keep box below elements in header.

How to put <ul> around image in css

So, as the title says, I want to put <ul> around an image. The ul got 4 <li>, and I want to put 2 <li> on the left side of the image, and 2 <li> on the right side:
<ONE>-----<TWO>-----(imageLOGO.png)-----<THREE>-----<FOUR>
Here is how it looks at the moment:
As you can see the 4 <li> are at the top left corner of the site. They are put on the blue line from the same <div> - #line . I tried with padding, but it looks really bad, and it is hard to control once the page is minimized or resized in any way.
Here is the html file:
<body>
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>TREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="images/chelsea-logo.png">
</div>
</div>
</body>
And the css file:
body {
background: url('../images/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
}
#top{
width: 150px;
margin: 0 auto;
height: 150px;
z-index: 1;
}
#top img {
position: absolute;
width: 150px;
height: 150px;
z-index: 1;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: inline-block;
padding: 5px;
margin: 25px;
}
.line-menu li {
padding: 0 89px;
display: inline-block;
}
I'll provide more information if needed. Thank you in advance for your time.

Here is one way of doing it.
You have the right idea by using absolute positioning to place the logo over the link panel.
I specified a width for the li elements and then applied text-align: center on the parent ul to keep then centered.
To open up space for the logo, I added a right-margin of 200px between the 2nd and 3rd li elements, using the nth-child selector.
You can adjust margins on various elements to control the spacing between and above the li elements.
Note, for smaller screena, you may need to use media queries and make adjustments to the margins and so on.
body {
margin: 0;
}
#top {
border: 1px dotted black;
position: absolute;
top: 0px;
left: 0;
right: 0;
text-align: center;
}
#top img {
vertical-align: top;
width: 150px;
height: 150px;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: block;
text-align: center;
margin: 20px 0 0 0;
padding: 0;
}
.line-menu li {
display: inline-block;
margin: 0 20px;
width: 100px;
border: 1px solid #CCCCCC;
}
.line-menu li:nth-child(2) {
margin-right: 200px;
}
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="http://placehold.it/150x150">
</div>
</div>

Add image after one and two. And .list-menu li float:left; display:block;

full image caption for images with dynamic size

I have this code:
HTML
<div id="wrapper">
<div class="box">
<img src="http://tukaki.pawlusmall.com/images/image1.png"/>
<span class="caption">
<p>caption</p>
</span>
</div>
<div class="box">
<img src="http://tukaki.pawlusmall.com/images/image2.png"/>
<span class="caption">
<p>caption</p>
</span>
</div>
<div class="box">
<img src="http://tukaki.pawlusmall.com/images/image3.png"/>
<span class="caption">
<p>caption</p>
</span>
</div>
</div>
CSS
.box {
position: relative;
width: 30%;
height: auto;
display: inline-block;
}
.box img {
height: auto;
width: 100%;
position: absolute;
left: 0;
}
.box span {
position: absolute;
width: 100%;
height: auto;
color: #FFF;
left: 0;
background-color: #FF0000;
}
You can find it here:
http://jsfiddle.net/v2Vk3/3/
Just want the caption to be the same height and width as the image, overlaping it and without changing the automatic resizing for images.
Is there any way to get this working with CSS?
Thx

I guess you have asked for this http://jsfiddle.net/6hgCj/
.box {
position: relative;
width: 30%;
height: auto;
display: inline-block;
}
.box img {
height: auto;
width: 100%;
}
.box span {
position: absolute;
width: 100%;
height: 100%;
color: #FFF;
left: 0;
top:0;
background-color: #FF0000;
}