I've created horrible-looking demonstration of my current issue. The Question is, how can I have overflow-y as scroll, and overflow-x visible, while expandable content remains visible for all it's size (without been cut by end of div)?
In this example, expandable content shows in its full size without overflow, but with overflow, it is just cut with border. Tried the workaround with wrapper, but actually it's not working at all :(
body {
background-color: cyan;
}
.leftnav {
width: 8em;
height: 5em;
padding-right: 7em;
background-color: green;
color: white;
overflow-y: scroll;
overflow-x: visible;
direction: rtl;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
color: black;
display: none;
position: absolute;
left: 5em;
top: -1em;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 8px;
z-index: 2;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body>
<p></p>
<div class="leftnav">
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<br>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<br>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<br>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<br>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<br>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</body>
Ok, with playing around and a bit of googling, this is not possible without JavaScript. You can get it outside, however, the element loses its actual position if you scroll. It is quite an interesting problem, more on it you can find here and problems solution.
$(function() {
// whenever we hover over a menu item that has a submenu
$('.dropdown').on('mouseover', function() {
var $menuItem = $(this),
$submenuWrapper = $('> .dropdown-content', $menuItem);
// grab the menu item's position relative to its positioned parent
var menuItemPos = $menuItem.position();
// place the submenu in the correct position relevant to the menu item
$submenuWrapper.css({
top: menuItemPos.top,
left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0.75)
});
});
});
body {
background-color: cyan;
position: relative;
}
.wrapper {position: relative;}
.leftnav {
width: 8em;
height: 5em;
padding-right: 7em;
background-color: green;
color: white;
overflow-y: scroll;
overflow-x: visible;
direction: rtl;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
color: black;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 8px;
z-index: 2;
}
.dropdown:hover .dropdown-content {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p></p>
<div class="wrapper">
<div class="leftnav">
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<br>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<br>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<br>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<br>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<br>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</div>
</div>
</body>
Related
The code when ran doesn't fill the flexbox like I would like it to do, and I want to continue to be more so responsive to size changes. I have pulled resources from a lot of places and still can't find out why it isn't working. I came here because I often use this site to help with other work as well.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
/* Header */
.column, .columna, .columnab, .columnb {
align-items: center;
text-align: center;
border: solid;
border-width: thin;
max-height: 20em;
}
.column {
flex: 33%;
}
.columna {
width: 100%;
}
.columnab {
width: 22%;
}
.columnb {
width: 17%;
}
.row {
min-height: 10em;
display: flex;
flex-wrap: wrap;
background-color: #FF9176;
}
/* Navigation Section */
.dropbtn {
background-color: #FF9176;
color: #0061A0;
font-size: 75%;
font-family: 'Solway', serif;
padding: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #FEB384;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
width: 100%;
position: absolute;
background-color: #FEB384;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #FECE9D;}
.show {display: block;}
<header>
<div class="row">
<div class="column" style="padding: 0">
<div class="columna">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">GROUP 1</button>
<div id="myDropdown" class="dropdown-content">
Item 1
Item 2
Item 3
</div>
</div>
</div>
<div class="columna">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">GROUP 2</button>
<div id="myDropdown" class="dropdown-content">
Item 1
Item 2
Item 3
</div>
</div>
</div>
<div class="columna">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">GROUP 3</button>
<div id="myDropdown" class="dropdown-content">
Item 1
Item 2
Item 3
</div>
</div>
</div>
<div class="columna">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">GROUP 4</button>
<div id="myDropdown" class="dropdown-content">
Item 1
Item 2
Item 3
</div>
</div>
</div>
</div>
<div class="column">
<h6> LOGO </h6>
<img src="images/print_studio_logo.***" alt="Print Studio's Logo">
</div>
<div class="column" style="padding: 0">
<div class="columna" style="height: 50%;">
<h6> INSERT CART / LOGIN </h6>
</div>
<div class="columna" style="height: 50%;">
<h6> INSERT SOCIAL </h6>
</div>
</div>
</div>
</header>
Welcome to stack overflow. Your question is not very clear could you be more precised about the element you would like to fill, by pointing classes or maing img.
For now I adjusted the width of your dropdown class that were not by 100%
.dropdown{
width: 100%;
}
.dropdown button {
width: 100%;
}
DEMO based on what I understood.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
/* Header */
.column, .columna, .columnab, .columnb {
align-items: center;
text-align: center;
border: solid;
border-width: thin;
max-height: 20em;
}
.column {
flex: 33%;
}
.columna {
width: 100%;
}
.columnab {
width: 22%;
}
.columnb {
width: 17%;
}
.row {
min-height: 10em;
display: flex;
flex-wrap: wrap;
background-color: #FF9176;
}
/* Navigation Section */
.dropbtn {
background-color: #FF9176;
color: #0061A0;
font-size: 75%;
font-family: 'Solway', serif;
padding: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #FEB384;
}
.dropdown {
position: relative;
display: inline-block;
width:100%;
}
.dropdown-content {
display: none;
width: 100%;
position: absolute;
background-color: #FEB384;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #FECE9D;}
.dropdown button{ width:100%;}
.show {display: block;}
<header>
<div class="row">
<div class="column" style="padding: 0">
<div class="columna">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">GROUP 1</button>
<div id="myDropdown" class="dropdown-content">
Item 1
Item 2
Item 3
</div>
</div>
</div>
<div class="columna">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">GROUP 2</button>
<div id="myDropdown" class="dropdown-content">
Item 1
Item 2
Item 3
</div>
</div>
</div>
<div class="columna">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">GROUP 3</button>
<div id="myDropdown" class="dropdown-content">
Item 1
Item 2
Item 3
</div>
</div>
</div>
<div class="columna">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">GROUP 4</button>
<div id="myDropdown" class="dropdown-content">
Item 1
Item 2
Item 3
</div>
</div>
</div>
</div>
<div class="column">
<h6> LOGO </h6>
<img src="images/print_studio_logo.***" alt="Print Studio's Logo">
</div>
<div class="column" style="padding: 0">
<div class="columna" style="height: 50%;">
<h6> INSERT CART / LOGIN </h6>
</div>
<div class="columna" style="height: 50%;">
<h6> INSERT SOCIAL </h6>
</div>
</div>
</div>
</header>
I am trying to create a simple layout that uses css flex to display 4 boxes across the screen on 2 rows.
What I want to happen is I want to be able to add more divs to my HTML, and whenever the divs reach the end of the right hand side of the screen, no more divs are added, and a new row should being. However, whenever I add more than a certain number of divs, the divs start to move off screen. I want the divs to only stay within 100% of the screen size and move onto a NEW ROW once it hits the end of the page view.
The following photo shows what I am current getting and what I should be getting.
Here is some of my code....
HTML
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #212121;
overflow-x: hidden;
}
header {
display: flex;
width: 100%;
margin: auto;
height: 100px;
align-items: center;
box-shadow: 0px 3px 10px gold;
background: #212121;
position: sticky;
top: 0px;
}
.logoContainer,
.navLinks {
display: flex;
}
.logoContainer {
flex: 1;
}
nav {
flex: 1;
}
.navLinks {
justify-content: space-around;
cursor: pointer;
margin-right: 20px;
color: white;
}
.navLink {
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
}
ul {
list-style: none;
}
.containers {
display: flex;
background: green;
}
.gold1,
.gold2,
.gold3,
.gold4,
.gold5 {
background-color: white;
border-radius: 10px;
margin-top: 40px;
flex: 1;
}
.title {
text-align: center;
padding-top: 10px;
}
.price {
text-align: center;
margin-top: 40px;
font-size: 24px;
font-weight: bold;
color: black;
}
button {
width: 100px;
height: 35px;
border-radius: 10px;
background: rgb(14, 170, 14);
border: none;
cursor: pointer;
font-size: 16px;
}
.button {
text-align: center;
background-color: white;
}
<div class="containers">
<div class="gold1">
<h1 class="title">shop 1</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy</button>
</div>
</div>
<div class="gold2">
<h1 class="title">shop 2</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy</button>
</div>
</div>
<div class="gold3">
<h1 class="title">shop 3</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy Gold</button>
</div>
</div>
<div class="gold4">
<h1 class="title">shop 4</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy</button>
</div>
</div>
<div class="gold5">
<h1 class="title">shop 5</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy</button>
</div>
</div>
</div>
PLEASE NOTE : For some reason, the code snipet is not showing what my screen is showing. I will try to fix this.
As you can see a few things.
The boxes go off screen.
The boxes do not stack on each other as the screen get smaller ( I want this to be responsive, having all the boxes stack on top of each other 1 by 1 on smaller screens , and only showing 4 boxes / row on larger screens )
Thanks in advance for the help.
You need to add some extra flex properties to css to work fine
You do not need to create a class for each element if it is going to share its properties, if you want to add something you can create classes and add them to the element and to these add or remove properties. What I mean is that .gold1, .gold2, .gold3 ... etc. they are not really necessary you can only use .gold since all those boxes will share their css properties.
CSS selectors
flex-direction: column; // for mobile devices
flex-wrap: wrap;
Flexbox guide
Also you need to use media queries to add or remove properties to your css id's,class,tags...
Here you can see an example of you want (Click on run code snippet and go to full page)
body {
background: #111;
box-sizing: border-box;
}
body>h1 {
text-align: center;
color: white;
}
.container {
margin: auto;
display: flex;
justify-content: center;
flex-direction: column;
background: green;
width: 90%;
}
.gold {
background: white;
border-radius: 10px;
margin-top: 10px;
padding: 10px;
}
.title {
text-align: center;
padding-top: 10px;
}
.price {
text-align: center;
margin-top: 40px;
font-size: 24px;
font-weight: bold;
color: black;
}
.button {
text-align: center;
background-color: white;
}
button {
width: 100px;
height: 35px;
border-radius: 10px;
background: rgb(14, 170, 14);
border: none;
cursor: pointer;
font-size: 16px;
}
#media (min-width: 992px) {
.container {
justify-content: space-between; /* add this */
flex-direction: row; /* change direction */
flex-wrap: wrap; /* wrap content */
}
.gold {
width: 22%; /* assign a lower width */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Flex</h1>
<div class="container">
<div class="gold">
<h1 class="title">Shop 1</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 2</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 3</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 4</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 5</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 6</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 7</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 8</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 9</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 10</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 11</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 12</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
</div>
</body>
</html>
I found the answer. All I needed to do was add flex-wrap: wrap and it gave me the desired output.
use flex-direction row and then write flex-wrap:wrap in container class
How can the tabs be always positioned flush to the right hand side of the container, when rotated and have child text of an unknown width?
Without rotation right: 0; on the .tab would be fine but the rotation throws it off.
body {
margin: 0;
}
.container {
background-color: pink;
padding: 3rem;
position: relative;
}
.tab {
position: absolute;
right: 1rem;
transform: rotate(-90deg);
padding: 1rem;
background-color: green;
margin-right: -2.45rem;
top: 5rem;
}
<body>
<div class="container">
<h1>Button</h1>
<div class="tab">
<button class="tab-button" type="button">Button</button>
</div>
</div>
<hr>
<div class="container">
<h1>Longer button</h1>
<div class="tab">
<button class="tab-button" type="button">Longer Button</button>
</div>
</div>
</body>
Adjust the transform-origin and add some translation then you can use right:0.
body {
margin: 0;
}
.container {
background-color: pink;
padding: 3rem;
position: relative;
}
.tab {
position: absolute;
right: 0;
transform: rotate(-90deg) translateY(-100%);
transform-origin: top right;
padding: 1rem;
background-color: green;
top: 2rem;
}
<div class="container">
<h1>Button</h1>
<div class="tab">
<button class="tab-button" type="button">Button</button>
</div>
</div>
<hr>
<div class="container">
<h1>Longer button</h1>
<div class="tab">
<button class="tab-button" type="button">Longer Button</button>
</div>
</div>
body {
margin: 0;
}
.container {
background-color: pink;
padding: 3rem;
position: relative;
}
.tab {
position: absolute;
right: -39px;
transform: rotate(-90deg);
padding: 1rem;
background-color: green;
top: 5rem;
min-width: 100px;
}
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js">
</script>
</head>
<body>
<div class="container">
<h1>Button</h1>
<div class="tab">
<button class="tab-button" style="width: 100%; white-space: nowrap" type="button">Button</button>
</div>
</div>
<hr>
<div class="container">
<h1>Longer button</h1>
<div class="tab">
<button class="tab-button" style="width: 100%; white-space: nowrap" type="button">Longer Button</button>
</div>
</div>
</body>
</html>
I have navbar for all the sections on the site.
when it's mobile view this navbar is one line with a scroll.
I want to scroll this navbar auto when I scroll the page down to the section.
can I achieve that without using sliders?
.wrapper {
width: 360px;
height: 720px;
border: 1px solid #000;
}
ul {
list-style-type: none;
padding: 10px 0;
margin: 10px 0;
display: flex;
background: #ccc;
}
li {
margin: 0 8px;
}
<div class="wrapper">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
html, body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.7);
}
nav {
max-width: 700px;
margin: 0 auto;
padding: 4px;
}
nav a {
color: white;
padding: 2px;
}
.content-container {
max-width: 700px;
margin: 0 auto;
}
.section-content {
padding: 10px 0px;
}
.flex-container {
display: flex;
justify-content: space-around;
}
.flex-column {
width: 150px;
height: 150px;
background-color: yellow;
margin: 2.5px;
display: inline-block;
}
<header>
<nav>
Section1
Section 2
Section 3
Section 4
</nav>
</header>
<div class="content-container">
<div class="section-content" id="first">
<h3>Section 1</h3>
<div class="flex-container">
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
</div>
</div>
<div class="section-content" id="second">
<h3>Section 2</h3>
<div class="flex-container">
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
<p class="flex-column">Hello world!</p>
</div>
<p>Item of div section 2.</p>
</div>
<div class="section-content" id="third">
<h3>Section 3</h3>
<p>Item of div section 3.</p>
</div>
<div class="section-content" id="fourth">
<h3>Section 4</h3>
<p>Item of div section 4.</p>
</div>
</div>
<script type = "text/javascript">
$(document).ready(function(){
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing');
});
});
</script>
Working code by me
I'm currently trying to create a special hover for a website.
Here is what I'm trying to do :
4 blocks, all responsive with a black bar with 70% of opacity with the main text.
Then when I hover a block, the black bar fill all the space at the bottom and reveals 2 or 4 buttons.
Maybe something like this :
<div class="image-block">
<div class="image1">
<span class="black-bar">SOME TEXT</span>
<button class="special-button">Button</button>
<button class="special-button">Button</button>
</div>
<div class="image2">
<span class="black-bar">SOME TEXT</span>
<button class="special-button">Button</button>
<button class="special-button">Button</button>
</div>
<div class="image3">
<span class="black-bar">SOME TEXT</span>
<button class="special-button">Button</button>
<button class="special-button">Button</button>
<button class="special-button">Button</button>
<button class="special-button">Button</button>
</div>
<div class="image4">
<span class="black-bar">SOME TEXT</span>
<button class="special-button">Button</button>
<button class="special-button">Button</button>
</div>
</div>
But for the CSS I really don't know how to do this. What is the simplest and best way to do this with something fully responsive ?
Thanks !
Here's a pure css option. If I missed something just let me know. I had to adjust your markup a little bit.
.image-block{
display: flex;
flex-direction: row;
}
.col{
display: flex;
flex-direction: column;
}
.image1, .image2, .image3, .image4{
background: url(http://lorempixel.com/output/nature-q-c-640-480-1.jpg) no-repeat center center;
background-size: cover;
width: 200px;
margin: 0 20px 20px 0;
position: relative;
overflow: hidden;
}
.image1, .image4{
height: 100px;
}
.image2, .image3{
height: 200px;
}
.black-bar{
background: rgba(0,0,0,0.4);
text-align: center;
color: #fff;
width: 100%;
top: 50%;
position: absolute;
margin-top: -18px;
padding: 10px 0;
font-family: Helvetica, Arial, sans-serif;
transition: all 0.5s ease;
bottom: calc(50% - 15px);
overflow: hidden;
}
.black-bar button{
margin: 10px;
display: none;
border: none;
background: #fff;
}
.black-bar p{
margin: 0;
font-weight: 200;
font-size: 12px;
}
.image1:hover .black-bar, .image2:hover .black-bar, .image3:hover .black-bar, .image4:hover .black-bar{
bottom: 0;
transition: all 0.5s ease;
}
.image1:hover .black-bar button, .image2:hover .black-bar button, .image3:hover .black-bar button, .image4:hover .black-bar button{
display: inline-block;
}
<div class="image-block">
<div class="col">
<div class="image1">
<div class="black-bar">
<p>SOME TEXT</p>
<button class="special-button">Button</button>
<button class="special-button">Button</button>
</div>
</div>
<div class="image2">
<div class="black-bar">
<p>SOME TEXT</p>
<button class="special-button">Button</button>
<button class="special-button">Button</button>
</div>
</div>
</div>
<div class="col">
<div class="image3">
<div class="black-bar">
<p>SOME TEXT</p>
<button class="special-button">Button</button>
<button class="special-button">Button</button>
<button class="special-button">Button</button>
<button class="special-button">Button</button>
</div>
</div>
<div class="image4">
<div class="black-bar">
<p>SOME TEXT</p>
<button class="special-button">Button</button>
<button class="special-button">Button</button>
</div>
</div>
</div>
</div>
Edit:
Added an animation via tiny bit of calc magic.
bottom: calc(50% - 15px);
Check out the code below (I had to use jQuery) or this fiddle
$('.text').mouseenter(function () {
$('.hovering').animate({'height': '200px'}, 'slow');
});
$('.image').mouseleave(function () {
$('.hovering').animate({'height': '100px'}, 'slow');
});
.image {
position: relative;
background-image: url(http://www.w3schools.com/css/trolltunga.jpg);
height: 300px;
width: 600px;
}
.hovering {
display: block;
height: 100px;
width: 600px;
background-color: rgba(0,0,0,0.7);
overflow: hidden;
margin-top: 100px;
position: absolute;
}
button, .text {
display: block;
width: 130px; height: 40px;
margin: 0 auto;
}
.text {
color: white;
font-size: 40px;
text-align: center;
padding-top: 30px;
width: 200px;
margin-bottom: 30px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
<div class="hovering">
<span class="text">Text here</span>
<button>Button here</button>
</div>
</div>
The black box shrinks when mouse leaves the image