I have put together a JSFiddle which I'm satisfied has the correct code.
As you can see, when you hover over the 'a' element I have a div positioned at the bottom raise to show hidden 'text'
a {
display: block;
width: 200px;
}
a:hover .b {
bottom: 0px;
}
.a {
height: 250px;
background-color: red;
position: relative;
overflow: hidden;
}
.b {
position: absolute;
bottom: -50px;
background-color: yellow;
width: 100%;
}
.c {
height: 50px;
background-color: green;
}
<a href="http://www.google.com">
<div class="a">
<div class="b">
<div class="c">
A title
</div>
<div class="c">
Read more
</div>
</div>
</div>
</a>
The problem I have is that the showing of the bottom div is too quick, is there a css property that allows the div to rise up slowly?
There's a similar method used in this website (part way down the page) which I'm trying to replicate.
Any ideas how this can be achieved?
On the b element in css add the transition css property to specify the time it take to associate the style:
.b {
position: absolute;
bottom: -50px;
background-color: yellow;
width: 100%;
transition: bottom 1s;
-webkit-transition: bottom 1s;
}
Related
I want an output like this:
The actual structure is:
<div class="container"> <!-- green -->
<div class="overlay"> <!-- purple -->
</div>
<div class="parent"> <!-- red -->
<div class="child"> <!-- lightblue -->
Child
</div>
</div>
</div>
I have achieved it after half an hour of struggle via this CSS:
.container {
position: relative;
width: 500px;
height: 500px;
background: green;
z-index: 1;
}
.overlay{
background: purple;
position: absolute;
width: 150px;
height: 150px;
z-index: 2;
}
.parent {
position: relative;
background: red;
width: 250px;
height: 250px;
}
.child {
z-index: 100;
background: lightblue;
width: 50px;
height: 50px;
position: relative;
}
(Fiddle demo)
What I do not understand is: why is it not allowed to set .parent's z-index value to anything? Because doing so immediately breaks this order. If I set .parent{z-index: a;} where a is an integer <= 1, then the purple overlay comes over the child, but if a>=2, then .child and .parent both come over .overlay.
But why does it break anything at all? I would at-least expect z-index: 0; to not break anything, since it is the ground level kind of thing. What am I missing?
Also, if I am working on a webpage where the z-index of .parent cannot be changed from its given integer value, because of other constraints of the page, is there any other way to insert an .overlay between the .parent and its .child? (the positioning and z-index of the .overlay is in my hands)
I have a project website. There are 3 divs. What I want to do is that when I hover on the first div, the other 2 get smaller for emphasis. I have tried this but only one of the 2 divs shrink using the sibling and parent divs. How can I resize to or more divs when hovering only one div?
I need in CSS because the rules says that javascript may not be used.
Did you try to achieve this?
.prnt2 {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0;
background: transparent;
}
.chld {
width: 100%;
height: 100%;
margin: 0 auto;
background: lightgreen;
transition: all .4s ease;
}
.prnt:hover .prnt2:not(:hover) .chld {
height:50%;
width: 50%;
transition: all .5s ease;
}
.prnt2:hover .chld {
background: green;
}
<div class="prnt">
<div class="prnt2">
<div class="chld"></div>
</div>
<div class="prnt2">
<div class="chld"></div>
</div>
<div class="prnt2">
<div class="chld"></div>
</div>
</div>
using the sibling ~ selector this can be achieved, Although its limited.
Here we're selecting all elements whith class .tohide that comes after divs with class .tohover, So as you can see they have come after the hovered element.
div {
width: 100px;
height: 100px;
background: orange;
margin: 10px;
display:inline-block;
}
.tohover:hover ~ .tohide {
height:50px;
vertical-align:top; /* To stick them to the top */
}
<div class="tohover"></div>
<div class="tohide"></div>
<div class="tohide"></div>
I have the css transition working when the user hovers over item however when the mouse exits the div, content is pushed below during the transition. Below is my html/css along with a jsfiddle to show what I mean.
html:
<div id="container">
<div class="item">
<div class="img">
</div>
<div class="heading">
</div>
</div>
</div>
css:
#container {
width: 100%;
height: 100%;
}
.item {
width: 100%;
height: 400px;
position: relative;
}
.img {
background: #000;
width: 40%;
height: 400px;
float: left;
transition: width 0.5s ease;
}
.heading {
width: 60%;
height: 400px;
float: right;
background: #900;
transition: width 0.5s ease;
}
.item:hover .img {
width: 100%;
}
.item:hover .heading {
width: 100%;
background:rgba(255,255,255, 0.9);
position: absolute;
top:0;
left:0;
}
JSFiddle
I am sure it is a simple position problem. However, I am not familiar enough with the transition to know where to find the answer.
Updated position to
tranform: translateY(-100%);
in order to get rid of the non-transition property. Now before/after :hover the div heading gets pushed below item. Updated JSFiddle to show.
Updated transition: all to transition: width on both img and heading which fixed heading getting pushed below img on :hover, however the original problem of heading being pushed below when user exits :hover is still an issue.
I think I found the answer:
by making heading have position:absolute;, I can have it forced to stay inside of the item div, keeping it from moving below it. So my updated css (with actual class names and production stuff) looks like;
.flight {
height: 400px;
position: relative;
}
.flight-img {
background: red;
background-size: cover;
width: 40%;
height: 400px;
float: left;
position: relative;
/* CSS Animation Effects */
transition: width 0.5s ease;
}
.flight-heading {
width: 60%;
float: left;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: width 0.5s ease;
}
/* Alternate img float ***
/* Probably an easier way but this works for now */
.flight:nth-of-type(4n-1) .flight-img{
float: right;
}
.flight:nth-of-type(4n-3) .flight-img{
float: left;
}
.flight:nth-of-type(4n-1) .flight-heading{
left:0;
}
.flight:nth-of-type(4n-3) .flight-heading{
float: right;
}
/* Adding hover effects for desktop */
.flight:hover .flight-img {
width: 100%;
}
.flight:hover .flight-heading {
width: 100%;
position:absolute;
top:0;
left:0;
transform: translateY(50%);
background: rgba(0,0,0,0.75);
color: #fff;
h2 {
color: #fff;
}
}
while my html looks like:
<div id="flights">
<div class="flight">
<div class="flight-img"></div>
<div class="flight-heading">
<h2>Shared Flights</h2>
<p>The shared flight option is available for 1 to 5 people. This is our most economical flight. You will fly with other passengers that are booked that day.</p>
<button>Book Now</button>
</div>
</div>
<div class="clear"></div>
</div><!-- End Flights -->
with a JSFiddle to show. I know the animation needs work, but I figure making it smooth will be easy now that the divs stay in one place.
http://jsfiddle.net/cxwQF/12/.
Note: Red and green boxes should intersect. Green box is image or video. When hover it became yellow. But not on the bottom where the red box starts. Red box is control (for example, next image).
Question. How can I put parent div behind the image and child div to the top.
Markup:
<div id='image'></div>
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#image {
position: relative;
width: 100%;
height: 500px;
background: green;
z-index: 2;
}
#image:hover {
background: yellow;
}
#parent {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
}
/*#parent:hover {
background: blue;
} */
#child {
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
background: red;
z-index: 3;
}
How does this suit you? It's hard to know how to structure it without knowing what you are trying to achieve.
http://jsfiddle.net/cxwQF/21/
I've created another, invisible div for your 'child' but the original (foot) remains in the same place.
<div id='image'></div>
<div id='foot'>
</div>
<div id='parent'>
<div id='child'></div>
</div>
Sorry about the border styles its purely for test purposes.
I found the pure CSS solution. Markup remains the same.
CSS:
#image {
width: 100%;
height: 500px;
background: green;
}
#image:hover {
background: yellow;
}
#parent {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
visibility: hidden;
}
#child:hover {
background: pink;
}
#child {
margin: 0 auto;
visibility: visible;
width: 100px;
height: 100px;
background: red;
}
Solution: #parent's "visibility" should be set to "hidden", #child's "visibility" should be set to "visible"
Fiddle is here: http://jsfiddle.net/cxwQF/22/
I wanna set one div to be shown on another one.
I can do it by enter it in end of html code after other one,but I wanna do it by css.
how can I do it?
I'm guessing this is what you mean: having the divs overlap when placed one after the other in the markup? You can achieve this by making them position: absolute.
<div id="div1">
</div>
<div id="div2">
</div>
#div1, #div2 {
position: absolute;
}
#div1 {
background-color: red;
width: 100px;
height: 100px;
}
#div2 {
background-color: blue;
width: 100px;
height: 100px;
top: 5px;
left: 5px;
}