Is it possible to set a text on hover overlay

Is it possible to set a text on hover overlay - html

I have made this row with 4 grid elements with Bootstrap 3.
Demosite can be seen here
The middle box in the grid is 600x410px(see demosite). I would really like to have a white text showing up when a person is hovering that middlebox. Is that possible? I am not quite sure if it is a container inside the overlay there has to be used?
#front .row {
padding-bottom: 0px!important;
}
body {
background-color: #f5f5f5;
}
/* Set width between grid elements */
.small-padding.top {
padding-top: 10px;
}
.small-padding.bottom {
padding-bottom: 10px;
}
.small-padding.left {
padding-left: 5px;
}
.small-padding.right {
padding-right: 5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 2%;
left: 6%;
}
/* Position text on full width banner */
.header-container {
color: white;
margin: 0 5%;
}
.banner-text {
position: absolute;
bottom: 16%;
left: 6%;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
text-transform: uppercase;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
height: auto;
}
/* Maybe delete btn-success: */
.btn-success {
width: fit-content;
}
}
#media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
.image-overlay {
position:relative;
}
.overlay {
position:absolute;
transition:all .3s ease;
opacity:0;
transition:1.9s;
background: #00b1bab8;
}
.image-overlay:hover .overlay {
opacity:1;
}
.overlayFade {
background: rgba(27, 27, 27, 0.5);
top: 0;
/* Like this */
bottom: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>FINAL WORKING</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 margin_bottom">
<a href="#">
<div class="image-overlay">
<div class="overlay overlayFade"></div>
<img src="https://koed.dk/Static/Cms/1bfc7495-1445-4642-815e-0a20ab652ed5.jpg" alt="John Doe" class="img-responsive"></img>
<div class="inner-wrapper centered">
<h3 class="light-font">Har du et værksted eller en reservedelsbutik?</h3>
<span class="light-font">Så se de mange fordele her</span>
<!--<button class="btn btn-success btn-lg">Read More</button>-->
</div>
</div>
</a>
</div>
<div class="col-sm-6 margin_bottom">
<a href="#">
<div class="image-overlay">
<div class="overlay overlayFade"></div>
<!-- Middle box -->
<img src="http://placehold.it/600x410" alt="John Doe" class="img-responsive"></img>
<div class="inner-wrapper bottom-left">
<h3 class="light-font">Looking for having a good time</h3>
<span class="light-font">Here is where you should look</span>
<!--<button class="btn btn-success btn-lg">Read More</button>-->
</div>
</div>
</a>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<a href="#">
<div class="image-overlay">
<div class="overlay overlayFade"></div>
<img src="http://placehold.it/300x200" alt="John Doe" class="img-responsive"></img>
<div class="inner-wrapper bottom-left">
<h5 class="light-font">Looking for having a good time</h5>
<span class="light-font">Here is where you should look</span>
<!--<button class="btn btn-success btn-lg">Read More</button>-->
</div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-12 margin_bottom">
<a href="#">
<div class="image-overlay">
<div class="overlay overlayFade"></div>
<img src="http://placehold.it/300x200" alt="John Doe" class="img-responsive"></img>
<div class="inner-wrapper bottom-left">
<h5 class="light-font">Looking for having a good time</h5>
<span class="light-font">Here is where you should look</span>
<!--<button class="btn btn-success btn-lg">Read More</button>-->
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

#front .row {
padding-bottom: 0px!important;
}
body {
background-color: #f5f5f5;
}
/* Set width between grid elements */
.small-padding.top {
padding-top: 10px;
}
.small-padding.bottom {
padding-bottom: 10px;
}
.small-padding.left {
padding-left: 5px;
}
.small-padding.right {
padding-right: 5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 2%;
left: 6%;
}
/* Position text on full width banner */
.header-container {
color: white;
margin: 0 5%;
}
.banner-text {
position: absolute;
bottom: 16%;
left: 6%;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
text-transform: uppercase;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
height: auto;
}
/* Maybe delete btn-success: */
.btn-success {
width: fit-content;
}
}
#media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
.image-overlay {
position:relative;
}
.overlay {
position:absolute;
transition:all .3s ease;
opacity:0;
transition:1.9s;
background: #00b1bab8;
}
.image-overlay:hover .overlay {
opacity:1;
}
.overlayFade {
background: rgba(27, 27, 27, 0.5);
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-size: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>FINAL WORKING</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 margin_bottom">
<a href="#">
<div class="image-overlay">
<div class="overlay overlayFade">
</div>
<img src="https://koed.dk/Static/Cms/1bfc7495-1445-4642-815e-0a20ab652ed5.jpg" alt="John Doe" class="img-responsive"></img>
<div class="inner-wrapper centered">
<h3 class="light-font">Har du et værksted eller en reservedelsbutik?</h3>
<span class="light-font">Så se de mange fordele her</span>
<!--<button class="btn btn-success btn-lg">Read More</button>-->
</div>
</div>
</a>
</div>
<div class="col-sm-6 margin_bottom">
<a href="#">
<div class="image-overlay">
<div class="overlay overlayFade">Dymmy Text</div>
<img src="http://placehold.it/600x410" alt="John Doe" class="img-responsive"></img>
<div class="inner-wrapper bottom-left">
<h3 class="light-font">Looking for having a good time</h3>
<span class="light-font">Here is where you should look</span>
<!--<button class="btn btn-success btn-lg">Read More</button>-->
</div>
</div>
</a>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<a href="#">
<div class="image-overlay">
<div class="overlay overlayFade"></div>
<img src="http://placehold.it/300x200" alt="John Doe" class="img-responsive"></img>
<div class="inner-wrapper bottom-left">
<h5 class="light-font">Looking for having a good time</h5>
<span class="light-font">Here is where you should look</span>
<!--<button class="btn btn-success btn-lg">Read More</button>-->
</div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-12 margin_bottom">
<a href="#">
<div class="image-overlay">
<div class="overlay overlayFade"></div>
<img src="http://placehold.it/300x200" alt="John Doe" class="img-responsive"></img>
<div class="inner-wrapper bottom-left">
<h5 class="light-font">Looking for having a good time</h5>
<span class="light-font">Here is where you should look</span>
<!--<button class="btn btn-success btn-lg">Read More</button>-->
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

CSS gradient hover on different size images

I have a grid there have 20 different pictures and different sizes. The grid is made with bootstrap. On my example page I only post 3 grid elements. I would like to make an effect, so if a person hover over the image the effect will be something like this, but without the button:
Gradient effect example
I have tried to transfer this effect to my own image, but I cannot make it work. Can anybody see what I am doing wrong here?
Demo can be seen here
This is my demo ode until now:
body {
background-color: #f5f5f5;
}
/* Set width between grid elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
text-align: center;
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
text-align: left
bottom: 8px;
left: 16px;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.btn-success {
width: fit-content;
}
}
#media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
.image-overlay {
position:relative;
display:inline-block;
}
.overlay {
position:absolute;
transition:all .3s ease;
opacity:0;
transition:1.9s;
background: #00b1bab8;
}
.image-overlay:hover .overlay {
opacity:1;
}
.overlayFade {
top:0;
background: rgba(27, 27, 27, 0.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEMPLATE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div align="center">
<div>
<div class="image-overlay">
<img src="http://ercsirendelo.hu/_userfiles_/probarendelo/prevencio.jpg" alt="img" >
<div class="overlay overlayFade">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8 margin_bottom">
<div class="image-overlay">
<!-- 770x480-->
<img src="https://d3j0sq6zklqdqq.cloudfront.net/photos/2017/03/06/107-40070-gilmore-girls-1488831826.jpg" alt="5" class="img-responsive" />
<div class="overlay overlayFade"></div>
<div class="inner-wrapper bottom-left">
<h3 class="light-font">Looking for having a good time</h3>
<span class="light-font">Here is where you should look</span>
<!--<button class="btn btn-success btn-lg">Read More</button>-->
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12 margin_bottom">
<!-- 430x235-->
<div class="image-overlay">
<img src="https://www.photolakedistrict.co.uk/wp-content/uploads/Daffodil-Winter-Wedding-Photo-Grasmere.jpg" alt="5" class="img-responsive" />
<div class="overlay overlayFade"></div>
<div class="inner-wrapper bottom-right">
<!--<button class="btn btn-success">Read More</button>-->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 margin_bottom">
<!-- 430x235-->
<div class="image-overlay">
<img src="http://ercsirendelo.hu/_userfiles_/probarendelo/prevencio.jpg" alt="5" class="img-responsive" />
<div class="overlay overlayFade"></div>
<div class="inner-wrapper bottom-right">
<!--<button class="btn btn-success">Read More</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Change the content of the .overlayFade class, adding left, right and bottom properties.
.overlayFade {
background: rgba(27, 27, 27, 0.5);
top: 0;
/* Like this */
bottom: 0;
left: 0;
right: 0;
}

You just need to add following in your css file....
image-overlay:hover .img-responsive {
opacity: 0.5;
}

Just give height or width like
.overlayFade{width: 100%; height: 100%;}
Hope this help
let me know further clearification

Give bootstrap columns more height < 768 px

I have made 4 columns with bootstrap 3. Every column is 400x220px. I would do anything for make those columns 300x350px when the viewport hit < 768px. I do not know an method for doing this, and as I can see Bootstrap cannot do it.
I could use the the html5 <picture> tag. But I cannot see I can integrate that with the Bootstrap 3 grid, and it would not be a good solution in my eyes.
Does anybody have another idea on how I could do this, or is it not possible?
A demo of the columns is here.
background-color: #f5f5f5;
}
/* Set width between grid elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
text-align: center;
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.btn-success {
width: fit-content;
}
}
#media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEMPLATE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-3 margin_bottom">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-left">
<h3>Here is headline 1</h3>
</div>
</div>
<div class="col-xs-6 col-sm-3 margin_bottom">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-left">
<h3>Here is headline 2</h3>
</div>
</div>
<div class="col-xs-6 col-sm-3 margin_bottom">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-right">
<h3>Here is headline 3</h3>
</div>
</div>
<div class="col-xs-6 col-sm-3 margin_bottom">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-right">
<h3>Here is headline 4</h3>
</div>
</div>
</div>
</div>
</body>
</html>

Add a class to your containers, give it a height... I think this is what you are asking for. If not, let me know!
background-color: #f5f5f5;
}
/* Set width between grid elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
text-align: center;
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive { /*EDIT*/
width: 100%;
height: auto;
}
.btn-success {
width: fit-content;
}
/* Here you go */
.height-m {
height: 350px;
}
}
#media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEMPLATE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-3 margin_bottom height-m">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-left">
<h3>Here is headline 1</h3>
</div>
</div>
<div class="col-xs-6 col-sm-3 margin_bottom height-m">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-left">
<h3>Here is headline 2</h3>
</div>
</div>
<div class="col-xs-6 col-sm-3 margin_bottom height-m">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-right">
<h3>Here is headline 3</h3>
</div>
</div>
<div class="col-xs-6 col-sm-3 margin_bottom height-m">
<img src="http://placehold.it/400x220" alt="5" class="img-responsive" />
<div class="inner-wrapper bottom-right">
<h3>Here is headline 4</h3>
</div>
</div>
</div>
</div>
</body>
</html>

CSS :hover not working in pratice

I am working on a personal design project where I have 5 tiles with images in them and when you mouse over any of them they display alternate text. I have included my source code but my problem seems to be when I test this by hovering over the tile I added the W3 snippet to nothing happens. If I inspect the code however and add the hover attribute in the Chrome inspect tool it seems to work just fine. What am I missing here?
Here is my code My Code
.bottom p {
text-align: center;
}
.bottom {
margin-top: 200px;
width: 50%;
}
.top {
width: 33.33333333333%;
display: inline-block;
}
.tile {
height: 200px;
justify-content: center;
align-items: center;
overflow: hidden;
padding-left: 0px;
padding-right: 0px;
border-style: solid;
border-width: 5px;
border-color: /*Navy Blue*/ #333333/* FetchMe Orange #FBAA1E*/;
text-align: center;
box-shadow: 5px 5px 10px #000000;
}
.tile p {
z-index: 4;
font-size: 24px;
position: absolute;
bottom: 0;
margin-bottom: 10px;
font-weight: bold;
text-align: center;
margin-left: 35%;
margin-right: 35%;
}
.img1 {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
.top p {
text-align: center;
}
.fetch-form {
padding-top: 50px;
padding-bottom: 50px;
margin: 0 auto;
position: absolute;
z-index: 3;
margin-left: 110px;
margin-right: 110px;
left: 0;
right: 0;
}
.tiles {
margin-left: 0px;
margin-right: 0px;
z-index: 2;
position: absolute;
top: 150px;
left: 0px;
color: white;
display: inline-block;
padding-top: 10px;
}
.inner {
display: block;
margin-left: auto;
margin-right: auto;
}
.slider {
z-index: -1;
position: absolute;
padding-right: 0;
padding-left: 0;
margin-right: 0;
margin-left: 0;
left: 0;
right: 0;
top: 0;
height: 600px;
min-width: 100%;
}
.item {
height: 600px;
}
.container {
position: relative;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0%;
height: 100%;
transition: .5s ease;
z-index: 5;
}
.container:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.image {
display: block;
width: 100%;
height: auto;
}
<div class="row">
<div class="col-xs-10 fetch-form">
<form action="order" method="POST" role="form" id="address_form">
<div class="col-xs-12 fetch-form">
<div class="row">
<div class="col-xs-8 input">
<div class="input">
<i class="icon-prepend fa fa-home"></i>
<input type="text" placeholder="Street Address (optional)" id="address" name="address" class="form-control input-lg" autocomplete="off">
</div>
</div>
<div class="col-xs-2">
<input type="hidden" name="zip_code"><input type="hidden" value="true" name="set_temp_address">
<button class="btn btn-primary btn-lg btn-block btn" type="submit">
<i class="fa fa-search"></i> Fetch Me Food!
</button>
</div>
</div>
</div>
<div class="row well well-sm" style="display: none;">
<div class="col-xs-4 text-center">
<div class="radio" >
<label><center><i class="fa fa-taxi fa-lg hidden-xs"> </i></center>
<input type="radio" id="type_delivery" name="order_type" value="DELIVERY" checked="checked">
<span class="radiosearch"> </span><span class="ordertype">Delivery</span>
</label>
</div>
</div>
<div class="col-xs-4 text-center border-left">
<div class="radio">
<label>
<center><i class="fa fa-cutlery fa-lg hidden-xs"> </i></center>
<input type="radio" id="type_takeout" name="order_type" value="TAKEOUT">
<span class="radiosearch"> </span>
<span class="ordertype"><nobr>Pick-up</nobr></span>
<nobr></nobr>
</label>
</div>
</div>
<div class="col-xs-4 text-center border-left" >
<div class="radio"><a href="/account/groups" style="color: #333333;">
<label>
<center><i class="fa fa-group fa-lg" style="margin-bottom: 6px;"> </i></center>
<span class="ordertype"><span style="margin-top:9px;" class="visible-xs">Group »</span></span> <span
class="ordertype"><span class="hidden-xs">Group Order »</span></span> </label></a></div>
</div>
</div>
</form>
</div>
<div class="col-xs-12 tiles">
<div class="inner">
<div class="col-xs-3 top tile container">
<p>Restarunts and Catering</p>
<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" class="img1 image" alt="">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
<div class="col-xs-3 top tile">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" class="img1" alt="">
<p>Our Deals</p>
</div>
<div class="col-xs-3 top tile">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" class="img1" alt="">
<p>Grocery Shopping</p>
</div>
</div>
</div>
<br>
<div class="col-xs-12 tiles">
<div class="inner">
<div class="col-xs-6 bottom tile">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" alt="" class="img1" >
<p>Tailgates</p>
</div>
<div class="col-xs-6 bottom tile">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" alt="" class="img1">
<p>Order Anything</p>
</div>
</div>
</div>
<div class="slider col-xs-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide one -->
<div class="item active">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/download.jpg" alt="">
</div>
<!-- Slide two -->
<div class="item">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/download.jpg" alt="">
</div>
<!--Slide three -->
<div class="item">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/download+(2).jpg" alt="">
</div>
<!--Slide four -->
<div class="item">
<img src="https://s3.amazonaws.com/fetchme-prototype/images/download+(2).jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

This is an issue with other tiles overlapping the containers (z-index issue). You can try something like this:
.tiles {
pointer-events: none;
}
.container {
pointer-events: auto;
}

It is because you have used .tiles class for both .col-xs-12 items which are supposed to be 2 rows of pictures.
.tiles class has top, left properties defined and are position property as absolute. Since both rows of pictures have same top and left positions from .tiles, the second one overlaps the first.
This is why hover will never happen for .container normally. hover is always happening for the second row which is on top even though 1st row is visible below.

100% width not fully expanding to 100%

I'm making a website with bootstrap and I've run into a problem. When I use width: 100% on one of my divs, the background color doesn't fully expand to 100%. It only expands to 90% or so (5% of the left and 5% of the right side show the body background color). I apppriciate any help.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Galaxy</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
<script>
var sound = new Audio();
sound.src = "rick.mp3";
</script>
</head>
<body>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/galaxy3.jpg">
<div class="slide1"></div>
<div class="carousel-caption">
<div class="bannertext">
<h1>Santorodesign</h1>
<p>A website made by Michael</p>
<div class="mobileHide"> <button id="headerbutton-nederlands">Nederlands</button></div>
<div class="mobileHide"> <button id="headerbutton-english">English</button></div>
</div>
</div>
</div>
<div class="item">
<div class="slide2"></div>
<img src="images/galaxy2.jpg">
<div class="carousel-caption">
<div class="bannertext2">
<h1>Explore the galaxy<h1>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div id="firstrow">
<div class="planettext">
Planets
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/mercury.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/earth.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/venus.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Venus</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/mars.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Mars</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/jupiter.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about jupiter</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/saturn.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about Saturn</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/uranus.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about Uranus</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/neptune.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about Neptune</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
</div>
<div class="planet col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="pluto">
<div class="plutotext">
Poor Pluto
</div>
<href="##" onmousedown="sound.play()"><img src="images/pluto.png"></a> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Pluto</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
html {
margin: 0;
}
body {
background: #DCDCDC;
width: 100%;
margin: 0;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
#firstrow {
font-size: 2em;
padding: 0px 0 0 0;
width: 100%;
text-align: center;
color: black;
position: relative;
}
#firstrow span {
font-family: Impact, Impact5, Charcoal6, sans-serif;
font-size: 1.3em;
}
#firstrow p {
font-family: Helvetica,
}
#media all and (max-width: 2000px) {
#headerbutton-nederlands {
position: absolute;
bottom: 0px;
right: -90px;
line-height: 40px;
}
}
.planettext {
text-align: center;
font-size: 1.5em;
color: #000;
margin-top: 200px;
margin-bottom: 30px;
width: 100%;
background-color: #DCDCDC;
font-weight: bold;
}
.plutotext {
text-align: center;
font-size: 1.5em;
color: #000;
margin-top: 100px;
margin-bottom: 30px;
width: 100%;
background-color: #D3D3D3;
font-weight: bold;
margin: 00;
}
#pluto {
background-color: #D3D3D3;
height: 550px;
width: 100%;
}
#media all and (max-width: 900px) {
#headerbutton-nederlands { display: none; }
#headerbutton-english { display: none; }
}
#media all and (max-width: 2000px) {
#headerbutton-nederlands {
position: absolute;
bottom: 0px;
right: -70px;
line-height: 40px;
}
}
#media all and (max-width: 1450px) {
#headerbutton-nederlands {
position: absolute;
font-size: 14px;
line-height: 30px;
right: -55px;
}
}
#media all and (max-width: 1200px) {
#headerbutton-nederlands {
font-size: 13px;
line-height: 25px;
right: -55px;
}
}
#media all and (max-width: 1080px) {
#headerbutton-nederlands {
font-size: 10px;
line-height: 20px;
right: -40px;
}
}
#media all and (max-width: 2000px) {
#headerbutton-english {
position: absolute;
bottom: 0px;
right: 100px;
line-height: 40px;
}
}
#media all and (max-width: 1450px) {
#headerbutton-english {
position: absolute;
font-size: 14px;
right: 80px;
line-height: 30px
}
}
#media all and (max-width: 1200px) {
#headerbutton-english {
font-size: 13px;
line-height: 25px;
right: 50px;
}
}
#media all and (max-width: 1080px) {
#headerbutton-english {
font-size: 10px;
line-height: 20px;
right: 50px;
}
}
.planet {
margin-bottom: 30px;
position: relative;
}
.planet img {
height: 300px;
max-width: none;
margin-bottom: 20px;
}
.bannertext {
font-size: 1.3em;
line-height: 15px;
position: relative;
}
.bannertext h1 {
font-size: 2em;
}
.bannertext2 {
font-size: 2em;
}
.mobileShow { display: none;}
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (max-device-width : 480px){
.mobileShow { display: inline;}
.mobileHide { display: none;}
.planet img{
height: 200px;
}
}
#headerbutton-nederlands {
position: absolute;
font-weight: bold;
-webkit-border-radius: 5px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
#headerbutton-english {
position: absolute;
font-weight: bold;
-webkit-border-radius: 5px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
Thank you for your time.

Make sure to add following in your planet pluto div
<div class="row"> /* EDIT*/
<div id="pluto">
<div class="plutotext">
Poor Pluto
</div>
<href="##" onmousedown="sound.play()"><img src="images/pluto.png"></a> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Pluto</button>
</div>
</div> /* EDIT */
Here's CODEPEN answer
One thing that i noted is that though you used bootstrap grid system, you never used bootstrap row class, which is amazing. It's better you would use boostrap inbuilt row class instead of all these classes that you created. Your code looks messy because of that.
html {
margin: 0;
}
body {
background: #DCDCDC;
width: 100%;
margin: 0;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
#firstrow {
font-size: 2em;
padding: 0px 0 0 0;
width: 100%;
text-align: center;
color: black;
position: relative;
}
#firstrow span {
font-family: Impact, Impact5, Charcoal6, sans-serif;
font-size: 1.3em;
}
#firstrow p {
font-family: Helvetica,
}
#media all and (max-width: 2000px) {
#headerbutton-nederlands {
position: absolute;
bottom: 0px;
right: -90px;
line-height: 40px;
}
}
.planettext {
text-align: center;
font-size: 1.5em;
color: #000;
margin-top: 200px;
margin-bottom: 30px;
width: 100%;
background-color: #DCDCDC;
font-weight: bold;
}
.plutotext {
text-align: center;
font-size: 1.5em;
color: #000;
margin-top: 100px;
margin-bottom: 30px;
width: 100%;
background-color: #D3D3D3;
font-weight: bold;
margin: 00;
}
#pluto {
background-color: #D3D3D3;
height: 550px;
width: 100%;
}
#media all and (max-width: 900px) {
#headerbutton-nederlands { display: none; }
#headerbutton-english { display: none; }
}
#media all and (max-width: 2000px) {
#headerbutton-nederlands {
position: absolute;
bottom: 0px;
right: -70px;
line-height: 40px;
}
}
#media all and (max-width: 1450px) {
#headerbutton-nederlands {
position: absolute;
font-size: 14px;
line-height: 30px;
right: -55px;
}
}
#media all and (max-width: 1200px) {
#headerbutton-nederlands {
font-size: 13px;
line-height: 25px;
right: -55px;
}
}
#media all and (max-width: 1080px) {
#headerbutton-nederlands {
font-size: 10px;
line-height: 20px;
right: -40px;
}
}
#media all and (max-width: 2000px) {
#headerbutton-english {
position: absolute;
bottom: 0px;
right: 100px;
line-height: 40px;
}
}
#media all and (max-width: 1450px) {
#headerbutton-english {
position: absolute;
font-size: 14px;
right: 80px;
line-height: 30px
}
}
#media all and (max-width: 1200px) {
#headerbutton-english {
font-size: 13px;
line-height: 25px;
right: 50px;
}
}
#media all and (max-width: 1080px) {
#headerbutton-english {
font-size: 10px;
line-height: 20px;
right: 50px;
}
}
.planet {
margin-bottom: 30px;
position: relative;
}
.planet img {
height: 300px;
max-width: none;
margin-bottom: 20px;
}
.bannertext {
font-size: 1.3em;
line-height: 15px;
position: relative;
}
.bannertext h1 {
font-size: 2em;
}
.bannertext2 {
font-size: 2em;
}
.mobileShow { display: none;}
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (max-device-width : 480px){
.mobileShow { display: inline;}
.mobileHide { display: none;}
.planet img{
height: 200px;
}
}
#headerbutton-nederlands {
position: absolute;
font-weight: bold;
-webkit-border-radius: 5px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
#headerbutton-english {
position: absolute;
font-weight: bold;
-webkit-border-radius: 5px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Galaxy</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
<script>
var sound = new Audio();
sound.src = "rick.mp3";
</script>
</head>
<body>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/galaxy3.jpg">
<div class="slide1"></div>
<div class="carousel-caption">
<div class="bannertext">
<h1>Santorodesign</h1>
<p>A website made by Michael</p>
<div class="mobileHide"> <button id="headerbutton-nederlands">Nederlands</button></div>
<div class="mobileHide"> <button id="headerbutton-english">English</button></div>
</div>
</div>
</div>
<div class="item">
<div class="slide2"></div>
<img src="images/galaxy2.jpg">
<div class="carousel-caption">
<div class="bannertext2">
<h1>Explore the galaxy<h1>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div id="firstrow">
<div class="planettext">
Planets
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/mercury.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/earth.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/venus.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Venus</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/mars.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Mars</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/jupiter.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about jupiter</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/saturn.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about Saturn</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/uranus.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about Uranus</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/neptune.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about Neptune</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
</div>
<div class="planet col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div id="pluto">
<div class="plutotext">
Poor Pluto
</div>
<href="##" onmousedown="sound.play()"><img src="images/pluto.png"></a> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Pluto</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

I'm assuming you want the #pluto to be 100%?
<div class="planet col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="pluto">
<div class="plutotext">Poor Pluto</div>
</div>
</div>
Can you use the dev tools to check the width and padding of the parent div: . I'm guessing the issue is there.

Multiple Media Queries are not working

All are working however in 800 px, 1100px, 1400px , the navigation bar is not showing up as I think that the 400 px media query have overlapped others queries. I need help on how to make navigation bar show up ...
CSS Code:
#media screen and (min-width: 400px)
{
header {
padding: 1%;
}
header h1 {
position: relative;
left: 0.5%;
bottom: 10%;
}
header div{
display: none;
}
nav.sitenavigation {
}
nav.sitenavigation ul {
border: 3px solid #34180f;
display: none;
background-color: #B8944D;
position: absolute;
right: 5%;
top: 80%;
z-index: 1;
}
nav.sitenavigation ul li {
display: inline-block;
}
.navigation-menu-button {
float: right;
}
article.container{
padding:0%;
}
figure {
display: none;
}
aside {
display: none;
}
aside p {
display: none;
}
}
#media screen and (min-width:800px),print
{
header h1 {
position: absolute;
top: 8%;
left: 28.0%;
}
header div{
display: inline;
position: relative;
right: 39%;
}
nav.sitenavigation {
position: relative;
bottom: 2%;
padding: 0.3%;
}
.navigation-menu-button {
display:none;
}
ul li {
display:inline;
margin-right: 2%;
position: relative;
left: 36.5%;
}
article {
width: 62.6%;
padding: 2%;
}
article p {
padding-right: 0%;
}
#contentstart {
padding-right: 0%;
}
figure {
display: none;
}
aside {
display: inline;
}
aside p {
position: relative;
left: 3.5%;
margin: 2% 0 0 5%;
padding-right: 5%;
}
}
#media screen and (min-width:1100px){
header h1 {
position: absolute;
top: 5.5%;
left: 37%;
}
header div {
display: inline;
position: relative;
right: 39%;
}
nav.sitenavigation {
position: relative;
bottom: 2%;
padding: 0.3%;
}
.navigation-menu-button {
display:none;
}
ul li {
display:inline;
margin-right: 2%;
position: relative;
left: 43.5%;
}
article {
width: 62.6%;
padding: 2%;
}
article p {
padding-right: 50%;
}
#contentstart {
padding-right: 50%;
}
figure {
position: absolute;
left: 50%;
bottom: 28.7%;
margin: 2% 2% 0 0.3%;
}
aside {
display: inline;
width: 30%;
}
aside p {
position: relative;
left: 3%;
padding: 2% 6% 0 6%;
margin: 1% 0 0 0%;
}
}
#media screen and (min-width:1400px) {
body {
width: 1400px;
}
header h1 {
position: absolute;
top: 7%;
left: 42%;
}
header div {
display: inline;
position: relative;
right: 39%;
}
nav.sitenavigation {
position: relative;
bottom: 2%;
padding: 0.3%;
}
ul li {
display:inline;
margin-right: 2%;
position: relative;
left: 47.1%;
}
article {
width: 62.6%;
padding: 2%;
}
article p {
padding-right: 54%;
padding-bottom: 2%;
}
figure {
position: absolute;
left: 45%;
bottom: 1%;
top: 0.2%;
margin: 2%;
}
aside {
display: inline;
width: 30%;
}
aside p {
position: relative;
left: 3%;
padding: 2% 6% 0 6%;
padding-right: 7%;
margin: 1% 0 0 0%;
}
}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Revisions Bookstore & Cafe</title>
<!--
Revisions Bookstore and Cafe main web page
Filename: index.html
Author: Wong Wan Zhen Sofia
Date: 5 January 2017
HTML5 and CSS3 Illustrated Unit I, Visual Workshop
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.40753.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="images/android.png">
</head>
<body>
<div class="container">
<p class="skipnavigation">Skip navigation </p>
<header>
<h1>Revisions Bookstore & Cafe</h1>
<div>
<img src="images/logo.gif" width="120" height="100" alt="">
</div>
</header>
<nav class="sitenavigation">
<div class="navigation-menu-button">
<img src="images/menu.png" width = "60" height="60" alt="Show Navigation">
</div>
<ul>
<li>Home</li>
<li>Events</li>
<li>New Releases</li>
</ul>
</nav>
<article>
<div class="container">
<h2 id="contentstart">10th Anniversary Sale!</h2>
<figure><img src="images/browsing.jpg" width="500" height = "378" alt="picture of person browsing"></figure>
<p>10% off our top 10 best sellers</p>
<p>Buy any two books, get a third at 50% off</p>
<p>In-store giveaways every day this month</p>
<p>Through November 30</p>
</div>
</article>
<aside>
<p>Custom brewed coffee and hand-selected books.</p>
<p>Special orders are our specialty.</p>
</aside>
<footer>
<p>412 N. 25th St.</p>
<p>Richmond, VA 23223</p>
<p>(804) 555-2565</p>
</footer>
</div>
<script src ="script.js"></script>
</body>
</html>

Try to use bootstrap for responsive and mobile-first. Quickly demo for you.
HTML:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
COLLAPSE NAVBAR
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!--<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">-->
<!--<div class="input-group" id="wm_btn_cholai">-->
<!--<i class="glyphicon glyphicon-repeat"></i> Cho lại-->
<!--</div>-->
<!--</div>-->
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_boqua">
<i class="glyphicon glyphicon-refresh"></i> Bỏ qua
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_new">
<i class="glyphicon glyphicon-floppy-saved"></i> Thêm Mới
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_sua">
<i class="glyphicon glyphicon-edit"></i> Sửa
</div>
</div>
<!--<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">-->
<!--<div class="input-group" id="wm_btn_luu">-->
<!--<i class="glyphicon glyphicon-floppy-save"></i> Lưu-->
<!--</div>-->
<!--</div>-->
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_them">
<i class="glyphicon glyphicon-plus"></i> Thêm
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_xoa">
<i class="glyphicon glyphicon-remove"></i> Xóa
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_huy">
<i class="glyphicon glyphicon-trash"></i> Hủy
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="input-group" id="wm_btn_in">
<i class="glyphicon glyphicon-print"></i> In
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="input-group" id="wm_btn_inkemchidinh">
<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-list-alt"></i> In kèm chỉ
định</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="input-group" id="wm_btn_ketthuc">
<i class="glyphicon glyphicon-off"></i> Kết thúc
</div>
</div>
CSS:
.row {
margin-bottom: 5px;
margin-top: 10px;
}
#wm_header {
width: 100%;
min-height: 22px;
margin: 0;
/*background-image: linear-gradient(to bottom, #428bca 0px, #2d6ca2 100%);*/
/*background-repeat: repeat-x;*/
background-color: #428bca;
border-color: #2b669a;
color: #ffffff;
font-weight: bold;
padding: 5px;
font-size: 15px;
}
.input-label {
/*background-color: #428bca;*/
background-color: #fff;
border: 0;
font-weight: 700;
min-width: 110px;
text-align: left;
}
.input-group {
margin-bottom: 5px;
margin-top: 10px;
}
.input-group-addon:first-child {
text-decoration: none;
font-weight: bold
}
.button-load {
cursor: default;
background-color: #428bca;
color: #fff;
font-weight: bold;
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Is it possible to set a text on hover overlay - html

Related

CSS gradient hover on different size images

Give bootstrap columns more height < 768 px

CSS :hover not working in pratice

100% width not fully expanding to 100%

Multiple Media Queries are not working

Categories

Resources