Add overlay image on li [duplicate] - javascript

This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 4 years ago.
Problem: I am trying to make an overlay appear when a list item is hovered upon.
I am new to html and I am trying to get a division overlay on a list item hover. However the overlay appears in the full width of the screen when I want it only on the list item as class header which is in gray color.
I only want the red overlay division to appear on the gray list item.
Here's my code:
.* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #F9423A;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.price:hover {
/*box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)*/
background-color: #002A3A;
}
.price:hover .overlay {
height: 20%;
}
.price .header {
background-color: #ccd4d7;
color: #002A3A;
align-content: center;
font-size: 25px;
height: 100%;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
<div class="columns">
<ul class="price">
<li class="header"> li One
</br>
<img src="../images/closeicon.png" height="50%" width="50%"/>
<div class="overlay">
<span class="closebutton">
<img src="../images/closeicon.png" height="10px" width="10px"/> </span>
<div class="text">li One description
</div>
</div>
</li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header"> li One
</br>
<img src="../images/closeicon.png" height="50%" width="50%"/>
<div class="overlay">
<span class="closebutton">
<img src="../images/closeicon.png" height="10px" width="10px"/> </span>
<div class="text">li two description
</div>
</div>
</li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header"> li three
</br>
<img src="../images/closeicon.png" height="50%" width="50%"/>
<div class="overlay">
<span class="closebutton">
<img src="../images/closeicon.png" height="10px" width="10px"/> </span>
<div class="text">li three description
</div>
</div>
</li>
</ul>
</div>
Would anybody know how to do this?
Thanks,

Add position: relative to .price .header. Adding position: relative makes children with position: absolute position themselves relative to the parent. Otherwise any element with position: absolute positions itself relative to the window object.

Related

jQuery: animating position isn't affecting DOM

I'm trying to animate the top value of my CSS in order to create a dropdown nav when the user clicks the hamburger button.
The CSS doesn't seem to be getting applied to the element when I view in the Chrome inspector, but I've tried the hide() function on the same element and that works fine.
HTML:
<div class="top section-reversed">
<div class="container">
<div class="row">
<div class="col-2">
<span class="icon icon-logo-ctr"></span>
</div>
<div class="col-2 ml-auto">
<a id="asdf" href="#" class="icon icon-hamburger"></a>
</div>
</div>
</div>
</div>
<div class="nav-mobile">
<div class="content">
<a class="icon icon-close" href="#"></a>
<div class="cta-consult">
<h5>000000</h5>
<span class="telephone">000000</span>
</div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Prices</li>
<li>Furniture</li>
<li>Contact</li>
</ul>
<div class="social-header social-header-mobile">
<img src="image/social-whatsapp.png" alt="Placeholder" />
<img src="image/social-instagram.png" alt="Placeholder" />
<img src="image/social-facebook.png" alt="Placeholder" />
<img src="image/social-twitter.png" alt="Placeholder" />
</div>
</div>
</div>
JS:
$(document).ready(function() {
// nav-mobile
$('#asdf').click(function() {
$('.nav-mobile').animate({
'top': '+=540'
},
5000, function() {
// Animation complete.
});
});
});
CSS:
.nav-mobile {
background: #fff;
color: #000;
height: 100%;
left: auto;
overflow: hidden;
position: fixed;
/*top: 65px;*/
top: -605px;
width: 100%;
z-index: 1;
}
.nav-mobile > .content {
padding: 20px;
}
.nav-mobile .icon-close {
color: #797979;
float: right;
padding: 0;
}
.nav-mobile .cta-consult {
clear: both;
}
.nav-mobile .cta-consult h5 {
font-size: 14px;
margin: 0 0 2px;
letter-spacing: 0;
}
.nav-mobile .cta-consult .telephone {
font-size: 30px;
letter-spacing: .02em;
}
.nav-mobile ul {
border-top: #d0d0d0 solid 1px;
display: block;
list-style: none;
margin: 30px 0 20px;
padding: 20px 0 0;
width: 100%;
}
.nav-mobile a {
color: #000;
display: block;
text-transform: uppercase;
letter-spacing: .25em;
padding: 10px 0;
}

HTML CSS Javascript Hamburger Menu problem

would someone mind looking at a website please? The address is test.dvps.uk/index.html
I'm having issues with the Hamburger Menu, its in a 50% column and I want it right aligned. I've tried align content, floating and different position and displays but can seem to get it right. The other problem i'm having is that when the menu is toggled, it expands but pushes the content down of the container below but I want it to move the container too.
I'm sure that my tinkering to align the menu has caused this issue, so before I break it any further would you mind helping, please? Thank you :)
$(document).ready(function() {
$(".hamburger").click(function() {
$(".nav").slideToggle("slow");
});
});
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
border: none;
}
html {
box-sizing: border-box;
}
body {
font-family: "Arial";
font-size: 1.2em;
}
.container {
margin: 0 auto;
padding-top: 10px;
max-width: 1000px;
}
.container-bottom-pad {
margin: 0 auto;
padding-top: 10px;
max-width: 1000px;
padding-bottom: 80px;
}
.outerContainer {
background-color: #F1F1F1;
}
.row::before,
.row::after {
display: table;
content: " ";
clear: both;
}
.row {
padding: 10px 0;
}
.one,
.one-third,
.two-thirds,
.one-fourth {
width: 100%;
}
#headerAndNav {
background-color: rgba(135, 196, 66, 0.60);
margin-bottom: 10px;
}
header img {
z-index: -2;
position: absolute;
width: 20%;
margin: 0 auto;
}
.header-logo {
position: relative;
height: 100px;
width: auto;
}
.nav {
display: none;
padding: 0;
overflow: hidden;
/* Makes the sliding animation cleaner */
}
.nav-item {
list-style-type: none;
text-align: center;
background: #87c442;
display: block;
margin: 12px 0;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0px 6px #2c3e50;
}
.nav-link {
text-decoration: none;
color: #333;
}
.nav-item:active {
box-shadow: none;
transform: translate(0px, 6px);
transition: transform .20s;
}
.hamburger span {
display: block;
width: 35px;
height: 4px;
background: #625948;
margin: 5px 0px;
padding: 0;
}
.hamburger:hover span {
transition: background ease-in-out .25s;
background: #87c442;
}
.hamburger:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="headerAndNav">
<div class="row">
<header>
<div class="eleven-twelths column">
<nav>
<span class="flex-container">
<div class="align">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="signup.html">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="successes.html">Successes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="prices.html">Prices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</span>
</nav>
</div>
<div class="one-twelth column">
<img alt="logo" class="header-logo" src="images/site/opaque-logo.png">
</div>
<!-- end of one-twelth-->
</div>
<!-- end of row -->
</header>
</div>
<!-- end of container -->
Well, if you want a brute force solution, just do this in the CSS file:
.hamburger { position:fixed; top: 25px; right: 30px; }
This will take the hamburger div out from the document flow and it will always stick to the given position.
I see a couple other issues arising on the horizon, but keep going.
And take the whole align div out of the HTML.
After looking the adress you mention (test.dvps.uk/index.html) and following your questions:
1)" ... the Hamburger Menu, its in a 50% column and I want it right aligned ..."
The problems it's related to the div with class flex-container and the next div with class align (and note you have two definitions of class align: one floating right and the other floating left!)
2) ...pushes the content down of the container below but I want it to move the container too...
You can try with clear: right in the container after the menu.
Also you must note some properties in your file custom.css are misspelled (i.e bot instead bottom). Check it out this too.
I hope this help.
Saludos!
1) The alignment, as noted by others, is due to the flex container. Add:
justify-content: flex-end to right align.
2) The toggled menu pushing the content down is due to the DOM being changed (think of it as an element that goes from 0px width/height to 100px width/height). The easiest fix is to take the element out of the DOM flow. One way is using position. So, an example:
position: absolute; right: 0; z-index: 1 to ul.nav
Your hamburger should now be right aligned, and the hamburger content should not interfere/push down the other content.

Background Image Sticking Out Below Sticky Footer

I've just added a background image to a div on my homepage which sits in between my header and footer, and it is causing my sticky footer to sit at the bottom of the window instead of below the background image - so the background image sticks out below the footer... How can I get my sticky footer to sit below the div with the background image?
This is my HTML:
<body>
<header style="position: static;">
<div class="wrapper">
<div class="search" style="float: left; width: 20%; position: absolute; left: 0;">
<input type="text" class="st-default-search-input" contenteditable="true" style="background-color: #fff; border: 1px solid #EEE1DC; color: #000; font-weight: 400; float: left;">
</div>
<div class="social" style="right: 0; position: absolute;">
<img src="images/insta-ico.png" />
<img src="images/fb-ico.png" />
<img src="images/email-ico.png"/>
</div>
<div data-embed_type="cart" data-shop="summerheart.myshopify.com" data-checkout_button_text="Checkout" data-cart_button_text="" data-button_text_color="000" data-button_background_color="FAEDE8" data-background_color="transparent" data-text_color="757575" data-accent_color="FAEDE8" data-cart_title="Your cart" style="float: right; right: 0; margin-right: 20px; padding-top: 3px; padding-right: 0px; position: absolute; z-index: 9999;"></div>
<div class="logo"><img src="images/sh_logo3.png" /></div>
<nav id="nav" role="navigation">
Show navigation
Hide navigation
<ul>
<li>HOME</li>
<li>SHOP</li>
<li>ABOUT
<li>SIZING</li>
<li>VIDEO</li>
<li>PRESS</li>
<li>SOCIAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
<div id="hero"></div>
<!--<div style="background-color: #FAEDE8; z-index: 0; position: inherit;">
<p style="text-align: center; font-size: 0.9em; font-weight: 400; color: #000; letter-spacing: 1px; padding: 2px;">FREE SHIPPPING ON ALL ORDERS</p>
</div>-->
<footer>
<div class="foot-wrap">
<div class="foot-list-left">
<ul>
<li>PRIVACY POLICY</li>
<li>TERMS OF USE</li>
<li>CUSTOMER SERVICE</li>
<li>ORDERS</li>
<li>RETURN POLICY</li>
</ul>
</div>
<div class="foot-list-right">
<ul>
<li>© 2015 SUMMERHEART</li>
</ul>
</div>
</div>
</footer>
</body>
And my CSS:
body {
background-color: #FAEDE8;
font-family: 'Open Sans', sans-serif;
margin: 0 0 50px;
overflow: auto;
overflow-x: hidden;
}
footer {
position: absolute;
left: 0;
bottom: 0;
margin: 0;
height: 50px;
width: 100%;
background-color: #FAEDE8;
color: #000;
overflow: hidden;
}
#hero {
position: absolute;
min-height: 100%;
background-size: cover;
width: 100%;
background-repeat: no-repeat;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
overflow-y: auto;
}
And lastly the JavaScript
$(function() {
var images = ['hero1.jpg', 'hero2.jpg', 'hero3.jpg', 'hero4.jpg', 'hero5.jpg', 'hero6.jpg', 'hero7.jpg', 'hero8.jpg', 'hero9.jpg'];
$('#hero').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
});
Any thoughts as to what is causing the jump?
here is the page in question - http://japesfawcett.com/testsh/hometest.html
After looking at your code, (and as MinusFour) pointed out. You're issue is the min-width:100% on your #hero div.
Remove this and you will be back in business!
Min-height 100% means that the smallest that div could ever be is, well, 100% of the window. This was causing your footer to sit at the bottom of your window instead of the page.
Here is a JSFiddle showing you the change.
Solution 2:
Alright, try this out:
Here is your new HTML structure. I kept all of your original class names so you shouldn't have to rename everything...
<div data-embed_type="cart" data-shop="summerheart.myshopify.com" data-checkout_button_text="Checkout" data-cart_button_text="" data-button_text_color="000" data-button_background_color="FAEDE8" data-background_color="transparent" data-text_color="757575" data-accent_color="FAEDE8" data-cart_title="Your cart" style="float: right; right: 0; margin-right: 20px; padding-top: 3px; padding-right: 0px; position: absolute; z-index: 9999;"></div>
<div class="logo"><img src="images/sh_logo3.png" /></div>
<nav id="nav" role="navigation">
Show navigation
Hide navigation
<ul>
<li>HOME</li>
<li>SHOP</li>
<li>ABOUT
<li>SIZING</li>
<li>VIDEO</li>
<li>PRESS</li>
<li>SOCIAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<div id="hero"></div>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="foot-wrap">
<div class="foot-list-left">
<ul>
<li>PRIVACY POLICY</li>
<li>TERMS OF USE</li>
<li>CUSTOMER SERVICE</li>
<li>ORDERS</li>
<li>RETURN POLICY</li>
</ul>
</div>
<div class="foot-list-right">
<ul>
<li>© 2015 SUMMERHEART</li>
</ul>
</div>
</div>
</footer>
</body>
Here is the main part I added to your CSS, but I did create the JSFiddle with your entire main.css file, so it should just be a copy/paste solution. Apologies for the CSS being a little messy in the fiddle.
* {
margin: 0;
}
html, body {
height: 100%;
}
.site-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#content{
position: absolute;
z-index: -94;
display: block;
top: 0;
height: 100%;
width: 100%;
}
.footer, .push {
height: 4em;
z-index:12;
position:absolute;
}
.footer, .push {
clear: both;
}
Here is the Full Screen JSFiddle
Here is the Code View JSFiddle
Hopefully this solves your problem! Let me know!
*You may need to mess with some z-index on your header, but that's a small change.

Let the div fill in the rest of my html

I have created a header, body and footer for my html. Below is the code:
JSFIDDLE
JSFIDDLE
I have made my body (#number) to have a background of red color but it won't show up. I did not set the height of it and just set it to 100% because I just want it to fill into the middle of the page. Why is it the red background won't show up?
If you won't add a min-height attribute in css like:
#numbers {
min-height:30px;
}
or
<div id="numbers" style="min-height:30px" class="container-fluid"></div>
you can also think about adding a space in this div: see here
or you add the background-color to your #holder
#header {
background-color: #273746;
height: 55px;
box-shadow: 2px 2px 2px 2px;
}
#numbers {
background-color: red;
height: 83vh;
}
#keypad {
height: 30px;
background-color: springgreen;
text-align: center;
box-shadow: 15px 15px 15px 15px black;
}
.footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
<div id="holder">
<div id="header" class="container-fluid">
<div class="navbar">
<a class="navbar-brand">Keypad <span id="counterId"></span></a>
</div>
</div>
<div id="numbers" class="container-fluid">
</div>
<footer class="footer">
<div id="keypad" class="container-fluid">
<a href="#keypad-toggle" id="keypad-toggle"><span class="glyphicon glyphicon-th"></span> Number Pad
</a>
</div>
</footer>
</div>
To do that, you have to set the height of all the parents of the div.
Add this css -
html, body, #holder {
height: 100%;
}
https://jsfiddle.net/o5rw4b82/6/
You can do this nicely with flexbox
#header{ background-color: #273746 ; height:55px; box-shadow: 2px 2px 2px 2px;}
#numbers{background-color: red; flex-grow:1; }
#keypad{height:30px;background-color: springgreen; text-align: center; box-shadow: 15px 15px 15px 15px black;}
#holder {
height:100vh;
display:flex;
flew-wrap:wrap;
flex-direction:column;
}
body {
margin:0;
}
<div id="holder">
<div id="header" class="container-fluid">
<div class="navbar">
<a class="navbar-brand">Keypad <span id="counterId"></span></a>
</div>
</div>
<div id="numbers" class="container-fluid">
</div>
<footer class="footer">
<div id="keypad" class="container-fluid">
<a href="#keypad-toggle" id="keypad-toggle"><span class="glyphicon glyphicon-th"></span> Number Pad
</a>
</div>
</footer>
</div>

Need help to create html page with css div ul li list to make it rotational

I am posting html content of my test page which I want to design like few of the web pages I have seen on different web sites. I want to create div with ul li list to make it rotational, at a time only three div should be displayed and remaining will be hidden. Hidden div should be visible only if I click on left or right rotation link
For example...
New product list on this site. www.mysmarttrip.in/index.php
Featured deal list on this site. www.freekaamaal.com
I tried a lot to make it like that but my knowledge of CSS and Javascript is limited. I need help form someone to make my page working like the site I posted above.
Thanks in advance... please help me
My HTML page:
<html>
<head>
<style type="text/css">
.product_head {
overflow: hidden;
width: 703px;
height: 35px;
padding: 0px;
position: relative;
border: 1px solid rgb(141, 196, 120);
font-family: verdana,geneva,Arial,helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
border-radius: 5px 5px 5px 5px;
text-align: center;
display: table-cell;
vertical-align: middle;
position: relative;
background-color: #27638C;
color: #FFFFFF;
font-size: 105%;
}
.product_page_box {
overflow: hidden;
width: 204px;
height: 250px;
padding: 0px;
margin: 2px 10px 5px 2px;
float: left;
position: relative;
border: 1px solid rgb(141, 196, 120);
font-family: verdana,geneva,Arial,helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
border-radius: 5px 5px 5px 5px;
}
.product_head .product_page_box ol, ul {
list-style: none outside none;
}
.product_container_head {
width: 204px;
height: 25px;
background-color: rgb(234, 248, 228);
padding: 10px;
text-align: center;
display: table-cell;
vertical-align: middle;
position: relative;
}
.product_container_head a {
color: #27638C;
text-transform: uppercase;
}
.product_details {
width: 172;
height: 25px;
vertical-align: middle;
text-align: center;
padding: 20px 10px 10px 0px;
position: relative;
margin: 10px;
border: 1px solid rgb(141, 196, 120);
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div class="product_head">
<p> main title </p>
</div>
<div>
<ul>
<li>
<div class="product_page_box">
<div class="product_container_head">
aa title </div>
<div class="product_details">
aa 1 </div>
<div class="product_details">
aa 2 </div>
<div class="product_details">
aa 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
bb title </div>
<div class="product_details">
bb 1 </div>
<div class="product_details">
bb 2 </div>
<div class="product_details">
bb 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
cc title </div>
<div class="product_details">
cc 1 </div>
<div class="product_details">
cc 2 </div>
<div class="product_details">
cc 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
dd title </div>
<div class="product_details">
dd 1 </div>
<div class="product_details">
dd 2 </div>
<div class="product_details">
dd 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
ee title </div>
<div class="product_details">
ee 1 </div>
<div class="product_details">
ee 2 </div>
<div class="product_details">
ee 3 </div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
use some jQuery plugin for example http://www.menucool.com/javascript-image-slider or http://wowslider.com/

Categories