I have a div with a hamburger sign on, covered by another div. I want the burger sign to stack on top of everything. So I applied z-index values to the places I thought appropriate. However it doesn't work. Can anyone explain why? Here is my codepen below please take a look.
codepen:
http://codepen.io/tbeckett24/pen/qORBbE
html:
<body>
<div id="photoCover">
<nav id="menu" class="menu">
<span>Menu</span>
</nav>
</div><!--photoCover-->
<div id="entryMenu"></div><!--entryMenu-->
</body>
css:
html {
background: green;
width: 100%;
height:100%;
}
body {
width: 100%;
height:100%;
position: relative;
}
#photoCover {
width:100%;
height:100%;
position: fixed;
top: 0;
left:0;
background-color: rgba(0,0,0,0.6);
}
.menu {
position: fixed;
top: 0; right: 0;
width: 100%;
background-color: rgba(0,0,0,0);
-webkit-backface-visibility: hidden;
}
.menu-trigger {
position: fixed;
top: 2%; right: 2%;
display: block;
width: 60px; height: 60px;
cursor: pointer;
background: red;
z-index:3000;
}
.menu-trigger span {
position: absolute;
top: 50%; left: 0;
display: block;
width: 100%; height: 6px;
margin-top: -2px;
background-color: #fff;
font-size: 0px;
-webkit-touch-callout: none;
user-select: none;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
z-index: 2000;
}
.menu-trigger span:before,
.menu-trigger span:after {
position: absolute;
left: 0;
width: 100%; height: 100%;
background: #fff;
content: '';
}
.menu-trigger span:before {
-webkit-transform: translateY(-270%);
transform: translateY(-270%);
}
.menu-trigger span:after {
-webkit-transform: translateY(270%);
transform: translateY(270%);
}
#entryMenu {
position: fixed;
top:0;
left:0;
height:100%;
width:100%;
background-color: rgba(0,0,0,0.9);
}
By adding a z-index to the parent-div, I got the "hamburger" on the top layer.
#photoCover {
(...)
z-index:99;
}
I would believe that the reason why, is that both the #photoCover and the #entryMenu is fixed and in the same place, the #entryMenu is on top, because it is added last.
Add z-index: 1; for div with id=photoCover.
Add z-index to the wrapper div
#photoCover {
width:100%;
height:100%;
position: fixed;
top: 0;
left:0;
background-color: rgba(0,0,0,0.6);
z-index: 1;
}
Demo URL
Related
I have the following html and CSS that I need to make responsive.
It starts with a lightweight YouTube video embedding (less YouTube code to download) found from labnol.org. I then wrapped the youtube-player div with two other divs to horizontally center the video.
I've tried a few solutions I've seen here in SO, but have not been able to make this work. I would like to be able to set the max width in any display, but not have it go off the edge of the screen when viewed on mobile devices.
I would greatly appreciate any help. Thank you.
HTML:
<div id="videoParent" class="videoParent">
<div id="videoDiv" class="videoDiv">
<div class="youtube-player" data-id="gmX8VFlrv38"></div>
</div>
</div>
with the following CSS.
<style>
<style>
.videoDiv {
max-width:560px;
display:inline-block;
width:90%;
}
.videoParent {
text-align:center;
}
.youtube-player {
position: relative;
padding-bottom: 56.23%;
/* Use 75% for 4:3 videos */
height: 0;
/*width:400px; */
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}
.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}
.youtube-player img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}
.youtube-player img:hover {
-webkit-filter: brightness(75%);
}
.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("//i.imgur.com/TxzC70f.png") no-repeat;
cursor: pointer;
}</style>
I simplified my CSS to the following at it appears to be doing what I need it to.
.videoParent {
text-align:center;
}
.videoDiv {
max-width:560px;
display:inline-block;
width:60%;
}
Right now I'm doing this to animate an element background color.
<style>
.container{
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
}
.element div {
position: absolute;
top: -20px;
left: 0;
background-color: #0c0;
transition:top 0.5s ease;
}
.element:hover div {
top: 0px;
transition:top 0.5s ease;
}
</style>
<div class="container">
<div class="element">some text<div>some text</div></div>
</div>
JsFiddle demo.
Is there any "cleaner" way to have the same animation? Right now I'm duplicating my content to achieve this.
You can use pseudo elements for this, and not have to duplicate any content:
It's basically moving one pseudo from above the element, and bringing it down over the element on the hover
div {
position: relative;
display: inline-block;
overflow: hidden;
}
div:before,
div:after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
z-index: -1;
}
div:before {
top: 0;
background: red;
}
div:after {
top: -100%;
background: green;
}
div:hover:before {
top: 100%;
}
div:hover:after {
top: 0;
}
<div>Text? Why would you ever want text?</div>
If you want the text to 'move' as well, you can do something similar:
div {
position: relative;
display: inline-block;
overflow: hidden;
height:20px;
width:300px;
}
div:before,
div:after {
content: attr(data-text);
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
z-index: -1;
}
div:before {
top: 0;
background: red;
}
div:after {
top: -100%;
background: green;
}
div:hover:before {
top: 100%;
}
div:hover:after {
top: 0;
}
<div data-text="Text? Why would you ever want text?"></div>
Note: canIuse suggests it is widely supported (bit I admit only tested in latest chrome, so only going by this for cross browser). However, This may affect SEO, and so I would be reluctant to use this in production.
If you just wanted the 'upper' element to flow over the top of the text (instead of 'lower' text scrolling as well), You could do:
div {
position: relative;
display: inline-block;
overflow: hidden;
height: 20px;
width: 300px;
background: red;
}
div:before {
content: attr(data-text);
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
top: -100%;
background: green;
}
div:hover:before {
top: 0;
}
<div data-text="The text I always wanted">The text I always wanted</div>
You could do it with background-position
Set a linear-gradient to 50% of each of the background colors and set the background size to be 200% of the actual div.
Then animate it and move the background 100% up. Like this:
.container {
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #c00 50%, #0c0 50%);
}
.element:hover {
background-position: 0 -100%;
transition: background-position 1s;
}
<div class="container">
<div class="element">some text</div>
</div>
This cuts out the need for any duplicate content in either the css or the html.
Yes, you can use pseudo element :before and get the text with attribute like:
<div class="container">
<div class="element" data-text="some text">some text</div>
</div>
And css:
.container{
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
}
.element:before {
content: attr(data-text);
position: absolute;
top: -20px;
left: 0;
background-color: #0c0;
transition:top 0.5s ease;
}
.element:hover:before {
top: 0px;
transition:top 0.5s ease;
}
http://jsfiddle.net/Pik_at/g3Lxrou4/3/
just similar to jbutler483, but using just a single pseudo class. FIDDLE
.container {
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
transition: top 0.5s ease;
overflow: hidden;
}
.element:after {
position: absolute;
top: -60px;
content: 'some text';
font-size: 20px;
line-height: 20px;
left: 0;
display: inline-block;
background-color: #0c0;
transition: top 0.5s ease;
}
.element:hover:after {
top: 0px;
}
<div class="element">some text</div>
Afternoon.
I am creating objects on an HTML page that display a tool-tip when you hover over the object.
I can't seem to get the tool tips to hover in front of all the objects. It only seems to sit in front of the one it relates too.
Below is an example:
.red
{
height: 75px;width: 75px;
background: red;
position: absolute;z-index: 1;
}
#red_tip
{
display: none;
}
.red:hover #red_tip
{
display: block;
background: blue;
position: absolute; z-index:2;
top:50px; left:50px;
width: 100px;
}
.green
{
height: 75px;width: 75px;
background: green;
position: absolute; z-index: 1;
top: 75px;
}
#green_tip
{
display: none;
}
.green:hover #green_tip
{
display: block;
background: blue;
position: absolute; z-index:2;
top:50px; left:50px;
width: 100px;
}
<div class="red">Red
<div id="red_tip">A tip for red goes here</div>
</div>
<div class="green">Green
<div id="green_tip">A tip for green goes here</div>
</div>
If you hover over the red box, you will see the tip sits behind the green box, I need it in front.
Many thanks,
Michael.
As long as the red and green divs have the same z-index, any higher z-indices within them don't actually make any difference. So you could simply give the red div a higher z-index than the green—as long as this order will reliably remain the same.
There's some useful info on z-index stacking contexts here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.
just make green dive position to relative and z-index to -1
.red
{
height: 75px;width: 75px;
background: red;
position: absolute;z-index: 1;
}
#red_tip
{
display: none;
}
.red:hover #red_tip
{
display: block;
background: blue;
position: absolute; z-index:15;
top:50px; left:50px;
width: 100px;
}
.green
{
height: 75px;width: 75px;
background: green;
position: relative; z-index:-1;
top: 75px;
}
#green_tip
{
display: none;
}
.green:hover #green_tip
{
display: block;
background: blue;
position: absolute; z-index:2;
top:50px; left:50px;
width: 100px;
}
That's a tricky one. in the .red style, set its z-index: 2;.
.red
{
height: 75px;width: 75px;
background: red;
position: absolute;z-index: 2;
}
Removing the z-index from .red and .green should fix your issue. Additionally, you should set the body's margin to 0. This will help prevent the those two divs from overlapping as they currently do.
body {
margin: 0;
}
.red {
height: 75px;
width: 75px;
background: red;
position: absolute;
}
#red_tip {
display: none;
}
.red:hover #red_tip {
display: block;
background: blue;
position: absolute; z-index:2;
top:50px; left:50px;
width: 100px;
}
.green {
height: 75px;
width: 75px;
background: green;
position: absolute;
top: 75px;
}
#green_tip {
display: none;
}
.green:hover #green_tip {
display: block;
background: blue;
position: absolute; z-index:2;
top:50px; left:50px;
width: 100px;
}
You can also simplify it by wrapping your class like so and then all you have to do is call the class tooltips.
a.tooltips {
position: relative;
display: inline;
margin:50px 0 0 50px;
top:50px;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
Then call it doing something like so
<a class="tooltips" href="#">CSS Tooltips
<span>Tooltip</span></a>
Check if you have any <div> not closed.
I want to create a hover effect on an image that when hovered over multiple colored divs appear. I figure I can do this with CSS, but am having trouble getting the result I want.
What I am aiming for it to look like in the end:
HTML:
<div class="row thumbrow">
<ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-4 thumbgrid">
<li>
<div class="thumb">
{{ cms:page_file:thumb_one.image:image}}
<span class="center">{{ cms:page:thumb_one.text:string }}</span>
<div class="yellow">
</div>
</div>
</li>
</ul>
</div>
CSS:
.thumb {
display:inline-block;
position: relative;
height: 170px;
overflow: hidden;
}
.thumb:after {
background: rgba(255,255,255,.8);
content:'';
display: block;
height: 170px;
left: 0;
opacity: 0;
padding: 20px;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.thumb:hover:after {
opacity: 1;
padding: 20px;
transition: opacity .4s;
}
.thumb:hover .yellow {
content:'';
display: block;
height: 170px;
left: 0;
opacity: 1;
position: relative;
top: 0;
width: 100%;
z-index: 5;
background: #f9d33a;
}
span.center {
color: white;
position: relative;
top: -100px;
z-index: 3;
}
As comments, the essential part was the missing of css position:absolute for the elements .yellow and .center
I have run up a demo here
The use of the selectors :after are not necessary , in the demo the CSS has been shortened to :
.thumb {
display:inline-block;
position: relative;
height: 170px; width:100%;
overflow: hidden;
}
.thumb .yellow, .thumb .center { display:none; }
.thumb:hover .yellow {
content:'.'; display: block;
position: absolute; z-index: 1;
bottom:10px; left: 10px; right:10px; top: 10px;
background: #f9d33a; opacity: 0.5;
}
.thumb:hover .center {
display:block; color: white;
position: absolute; z-index: 2;
top: 20px; left: 20px; right: 20px; bottom:20px;
}
Some values ( like the top, bottom, left, right offsets I made up ), the key part is the position:absolute
You can use hover selectors along with sibling selectors to display on hover, similar to the suckerfish menu:
http://jsbin.com/qerucawe/3
http://jsbin.com/qerucawe/3/edit
Hello i am trying to create hover effect on img.
HTML
<div>
<img src="http://placehold.it/350x150"/>
<div class="link-cont">click here to see more info</div>
</div>
css
div {
width: 350px;
position: relative;
}
.link-cont {
background: red;
position: absolute;
bottom: 0;
height: 100px;
opacity: 0;
transition: all 0.4s;
}
div:hover .link-cont {
opacity: 1;
bottom:-100px;
}
i need a something like this , when the user hover on it
but i am getting something like this
can someone help me to achieve what i am trying to do..
jsFid--> http://jsfiddle.net/Nnd7w/
You want like this, check DEMO http://jsfiddle.net/yeyene/Nnd7w/17/
div {
width: 350px;
font-size:12px;
position: relative;
}
div img{
padding:0 10px;
}
.link-cont {
background: red;
position: absolute;
bottom: 0;
width: 370px;
height: 210px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div:hover .link-cont {
opacity: 1;
bottom:-40px;
}
.link-cont a{
opacity: 0;
}
div:hover .link-cont a{
position: relative;
opacity: 1;
bottom:-175px;
left:10px;
background:#fff;
color:red;
text-decoration:none;
padding:0 10px;
}
Try this - and let me know if it works for you..
Fiddle
Just a few changes - Could use some cleaning up.
div {
position: relative;
top: 50px;
background-color: blue;
width: 350px;
height: 150px;
margin: auto;
}
.link-cont {
background: red;
position: relative;
left: -50px;
top: -200px;
width: 450px;
height: 250px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div a {
position: relative;
top: 210px;
left: 50px;
opacity: 0;
}
div:hover .link-cont {
opacity: 1;
}
a {
text-decoration: none;
color: #fff;
}
div:hover a {
opacity: 1;
}
Made a few modifications to you CSS
div {
width: 370px;
position: relative;
}
.link-cont {
background: red;
position: absolute;
top: 0;
width: 370px;
height: 200px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div:hover .link-cont {
opacity: 1;
}
div:hover img {
margin-left: 10px;
margin-top: 10px;
}
.link {
display: block;
margin-top: 170px;
margin-left: 50px;
}
Instead of playing with bottom property, I just changed opacity. I also assigned a class to anchor tag to make it display under the image. Also, you can see I have given some margin to the image to make it center and changed the width and height of your link-count div.
See Fiddle
I just changed bottom:-100px; to top: 160px; and it works fine!
Fiddle
Edit: Some more options because I don't understand:
Fiddle, and the one I think you want: Fiddle (that one's messy, but the hover only activates if you actually hover on the image.)