I have two divs that have an opacity less than 1. When hovering I would like to increase the opacity to 1 but can't seem to get it to work. Not sure if it is because of the z-index I have in the css. I need the z-index to prevent the whole div having reduced opacity.
This is the html
<section class="events">
<div class="events-wrapper">
<h2>Select the session you would like to attend for more information</h2>
<div class="melbourne-left">
<div class="melbourne-left-background">
<h1>Melbourne</h1>
<h3>Sunday Jan 21st 2015</h3>
</div>
</div>
<div class="sydney-right">
<div class="sydney-right-background">
<h1>Sydney</h1>
<h3>Sunday Feb 1st 2015</h3>
</div>
</div>
</div>
</section>
And this is the css for the 'melbourne' divs
.melbourne-left {
display: block;
float: left;
width: 44%;
clear: both;
margin-left: 5%
}
.melbourne-left-background {
position: relative;
z-index: 1;
min-height: 420px;
}
.melbourne-left-background::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://melbourne.jpg) center center;
opacity: .4;
width: 100%;
max-width: 855px;
background-repeat: no-repeat;
}
.melbourne-left-background:hover {
opacity: 1.0;
}
You are setting the opacity on the :before psuedo element of .melbourne-left-background, however you are detecting the :hover state and changing opacity for the DOM element and not the psuedo.
As such, change:
.melbourne-left-background:hover {
opacity: 1.0;
}
To
.melbourne-left-background:hover::before {
opacity: 1.0;
}
Related
The div tags are nested as
<div class="Site-wrapper" id="Site-wrapper">
<div id="Main-Menu-mobile" class="Main-Menu-mobile">
<div class="Site">
</div>
</div>
</div>
The logic for the menu is just these 4 CSS classes
.Site-wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.nav-open .Site {
left: auto;
transform: translate3d(70%, 0, 0);
}
.Site {
position: relative;
left: 0;
min-height: 100%;
background-color: #e4e4e4;
transition: 0.2s ease all;
}
.Main-Menu-mobile {
width: 70%;
position: absolute;
top: 0;
left: 0;
padding: 15px;
}
https://codepen.io/taufeq-orangejulius-razakh/pen/dypgjNO
Your Site-Wrapper div (The parent one) only has a height of 41px. And this stays the same even when the toggler button translates to right. This is where the implementation is a bit off.
Try removing your overflow:hidden from .Site-wrapper
.Site-wrapper {
position: relative;
width: 100%;
/* overflow: hidden; This needs to be implemented well*/
}
What you can do, is once the Hamburger icon is clicked change the overflow property value in Javascript.
I made an image that when hovered upon will change the opacity of the div on top of it. The div should be the same size as the image. I have managed to place the div on top of the image. However, when I set the width and height to 100%, the div covered the image INCLUDING the image's margin. I want to know how to fix it so that the div can only cover the image with the margin not included. Please note that I need the image to be responsive, so I do not want to set the height in pixels as much as possible.
Here's the fiddle:
https://jsfiddle.net/gsuxlzt/77vn1uyg/
Here's the code:
.margin {
margin-bottom: 10px;
}
.photo-thumbnail {
position: relative;
}
.photo-title {
width: 100%;
height: 100%;
background-color: #cbe1f4;
z-index: 10;
position: absolute;
top: 0;
left: 0;
color: #18121e;
text-align: center;
opacity: 0;
transition: opacity 0.5s linear;
}
.photo-title:hover {
opacity: .9;
}
<div class="photo-thumbnail">
<img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg" />
<a href=#>
<div class="photo-title">
<h2 style="padding: 20% 0 20% 0;">Project Title</h2>
</div>
</a>
</div>
You can try this code:
Html Code:
<div class="photo-thumbnail"><img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg"/><a href=#>
<div class="photo-title">
<h2 style="padding: 20% 0 20% 0;">Project Title</h2>
</div>
</a>
CSS Code:-
.margin {
margin-bottom: 10px;
}
.img-thumbnail{padding:0px;}
.photo-thumbnail {
position: relative;
}
.photo-title {
width: 100%;
height: 100%;
background-color: #cbe1f4;
z-index: 10;
position: absolute;
top: 0;
left: 0;
color: #18121e;
text-align: center;
opacity: 0;
transition: opacity 0.5s linear;
}
.photo-title:hover {
opacity: .9;
}
https://jsfiddle.net/Dhavalr/77vn1uyg/8/
first of all, don't use padding and margin for <img> instead use it for .photo-thumbnail
and use this code.
.photo-thumbnail {
position: relative;
display: inline-block;
vertical-align: top;
}
using inline-block for the parent can make image flexible as well as only occupy the necessary area as image.
try this, it will work.
In your example you are missing the closing of your "photo-thumbnail"
You are not obligated to use "Width: 100%", "Height: 100%", when you have an absolutely positioned element, instead you can make it take all of the space with
top: 0;
right: 0;
bottom: 0;
left: 0;
And in your case you can set the
bottom: 10px;
since that is how much your div gets out of the picture
here is an example in a fiddle: https://jsfiddle.net/77vn1uyg/3/
I have next code: JSFiddle
<div class="wrap">
<div class="item">
<div class="image" style="background-image: url(http://loremflickr.com/800/800)"></div>
</div>
</div>
<style>
.wrap {
width: 500px;
}
.item {
overflow: hidden;
padding-bottom: 100%;
position: relative;
}
.image {
backround-size: cover;
background-position: center center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all .4s ease;
}
.item:hover .image {
transform: scale(1.1)
}
</style>
If you will put mouse on photo, then leave, then put, then leave once again not very fast (waiting while transition finished), sometimes image is twitches. Looks like trnasition sometimes not working.
Does anybody knows, what is the problem of it?
You have a syntax in your code error:
backround-size: cover;
----^
this causes a positioning twitches
I am trying to over lap a div on another div by using css, while background should become blur, like modal pop up show.
But the background of modal pop is still getting displayed through the modal pop up.
As u can see background is visible through the modal pop up!!
I have setted z-index of pop up more than the background
CSS:
.MoreDetails
{
background-color: #000;
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 2.0;
}
My design:
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
Child element cannot be stacked below parent element, even by using z-index.
Use z-index for maintaining stack level of absolute positioned elements that are siblings.
http://jsfiddle.net/TWLgc/
HTML
<div class="wrapper">
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
<div id="tableDetails2" class="tblView2">
</div>
</div>
CSS
.MoreDetails
{
/*background-color: #000;*/
background-color: rgba(0,0,0,0.8);
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
/*opacity: 0.7;*/
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
.tblView2
{
position: fixed;
margin:auto;top:0;bottom:0;left:0;right:0;
z-index: 101;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
The biggest issue is that you're nesting the tableDetails inside the MoreDetails div. Any opacity or z-index you apply to tableDetails will affect MoreDetails. Another approach might be to use the ::before pseudo class on tableDetails and position the two with CSS.
Some other tips:
Don't share id and class names. Using MoreDetails as both an id and
a class may end up breaking things as you progress.
opacity can
only have a value from 0 - 1.
Hope this helps! Good luck!
so I have a div which will include an image http://www.reversl.net/hovers/ and I'd like for the image to reveal two links when hovered like in layout shown here http://www.reversl.net/demo/ Is it possible to achieve this using only css?
you can create the div with links and in css:
div.myimage div.links { display:none;}
div.myimage:hover div.links { display:block;}
sample html:
<div class="myimage">
<div class="links"> we are the links</div>
<img src="animage.png" />
</div>
obviously you have to setup yourself div positioning
Another way you could do it with display:none/block
div.container { width: 200px; height: 200px; position: relative; }
div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
div.container div { width: 100%; position: absolute; top: 0; display: none; }
div.container img:hover + div { display: block; }
div.container div:hover { display: block; }
<div class="container">
<img src="an_img.jpg">
<div> A link should be here </div>
</div>
You could always use 'opacity'.
Your markup would be something like this:
<div class="wrapper">
<img src="example.png" alt="example" />
<ul class="links">
<li>Example Link</li>
<li>Example Link</li>
</ul>
</div>
Then in CSS:
.wrapper {
position: relative; /*so the absolute positioning works */
}
.links {
position: absolute;
top: 0;
left: 0;
opacity: 0; /*hidden by default */
width: 100%;
height: 25px; /*making this up */
}
.wrapper:hover .links, .wrapper:focus .links {
opacity: 1; /*visible on hover */
}
A couple caveats to this technique:
You will need to use an opacity filter for IE8 and below, as they don't understand the opacity CSS property
I would NOT recommend this technique for navigation, as you seem to be intending. Users on touch devices (smartphones and tablets) don't really have the "hover" state to rely on.
If you want some bonus points, though, for users with modern browsers, add this:
.links {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
And the links will 'fade' in - all with CSS.
if you want to hover over the image only:
div.container { width: 200px; height: 200px; position: relative; }
div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
div.container img:hover { z-index: -1; }
div.container div { width: 100%; position: absolute; top: 0; }
div.container div:hover { z-index: 1; }
(the last one is needed to eliminate flicker when hovering over the links)
<div class="container">
<div> A link should be here </div>
<img src="an_img.jpg">
</div>