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>
Related
<body>
<div class="circle"> <p>projects</p></div>
</body>
body {
div {
width:100%;
max-width: 250px;
height:250px;
background-color:red;}
.circle:hover {
border-radius: 50%;
background-color:yellow;
transform: rotate(0.5turn);
transition:all .35s ease;
}
.circle:hover p {
pointer-events: none;
}
}
Hi everyone,
totally new to html and css here and trying to experiment an idea but can't figure it out
how to apply the hover effect only to the <div> element , but will not affect the <p> tag inside it?
the idea is that I need <p> in the centre of div and remain the same place (or upside down) while div is hovered
idea visualization
You don not need to rotate the element to achieve the result from your image.
First you can use flexbox properties to center the p inside your div and use :hover on div to change its border radius.
.circle {
width:100%;
max-width: 150px;
height: 150px;
background-color: red;
transition: all 0.5s;
display: flex;
justify-content: center;
align-items: center;
}
.circle:hover {
border-radius: 50%;
background-color: yellow;
}
<div class="circle">
<p>projects</p>
</div>
I have a context of 3 divs, one parent, and two children.
The two children are placed one on top of the other and I want to add a margin-top on the bottom one to move the one on top 50px up.
What ends up happening is that the one on the bottom moves down 50px instead.
Here is the code:
.container {
background-color: red;
width: 500px;
height: 300px;
position: relative;
margin: auto;
font-size: 30px;
}
.top,
.bottom {
height: 100px;
width: 100px;
}
.top {
background-color: purple;
}
.bottom {
margin-top: 50px;
background-color: blue;
}
<body>
<div class="container">
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
Any suggestions?
CSS allows you to move an element relative to its position without affecting other elements' positions if you use transform.
In this case you can translate the top element in the Y direction by -50px to move it up:
.container {
background-color: red;
width: 500px;
height: 300px;
position: relative;
margin: auto;
font-size: 30px;
}
.top,
.bottom {
height: 100px;
width: 100px;
}
.top {
background-color: purple;
transform: translateY(-50px);
}
.bottom {
background-color: blue;
}
<body>
<div class="container">
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
gap (grid-gap) Syntax
gap: 50px;
As you can see the first element is already on the highest point inside the parent container.
html
What you can do is in case you want to increase its height is scaling its y position by a negative number.
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;
}
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.
I'm curious whether it's possible with CSS to have a <div> overlaying the <div> above and below, like so:
I've tried to use margin-top: -40px;, but that doesn't seem to work. I've tried position:relative; without any luck, either. Any ideas?
Thanks!
Sure!
Demo Fiddle
The trick is managing the positioning of your divs, then setting the offset (top) correctly for the div you want overlapping.
<div></div>
<div>
<div></div>
</div>
CSS
div {
width:100%;
height:100px;
position:relative; /* ensure the parent divs have a position set */
}
div:first-child {
background:red;
}
div:last-child {
background:blue;
}
div:last-child div {
opacity:.5;
height:50px;
background:white;
position:absolute; /* position relative to the parent */
top:-25px; /* position the top to -25px (half its height) above the top of the parent */
}
There are many ways to do this:
With all div's absolutely positioned
You can use position: absolute to achieve this. This is better if you are trying to build a web app as it sticks to the edges of the screen.
Fiddle here
HTML
<div id="top-section"></div>
<div id="banner-section"></div>
<div id="btm-section"></div>
CSS
div {
position: absolute;
left: 0;
width: 100%;
}
#top-section {
top: 0;
bottom: 50%;
background: red;
}
#btm-section {
top: 50%;
bottom: 0;
background: blue;
}
#banner-section {
height: 100px;
margin-top: -50px;
top: 50%;
background: rgba(255,255,255,0.5);
z-index: 2;
}
With the #banner-section relatively positioned
You mentioned that you tried relative position. This is how you can achieve what you were trying to do. In this case, you want the #banner-section to be nested inside the #btm-section:
Fiddle here
HTML
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
position: relative;
top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
With a negative margin on #banner-section
You also mentioned that you tried using a negative value for the margin-top. Here is a working example of that:
Fiddle here
HTML
(Also nested)
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
margin-top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
You can also have it poking out of the top section
If the #top-section is static and the bottom section can extend past the bottom of the page, this might be the best option for you.
Fiddle here
HTML
<div id="top-section">
<div id="banner-section"></div>
</div>
<div id="btm-section"></div>
CSS
#banner-section {
position: absolute;
bottom: -50px;
z-index: 2;
height: 100px;
background: rgba(255,255,255,0.5);
}
Without further details you can do it as follows:
JSFiddle Example
HTML
<div class="top-section"></div>
<div class="banner-section"></div>
<div class="btm-section"></div>
CSS
.top-section{
height:60px;
background-color:red;
}
.btm-section{
height:60px;
background-color:blue;
}
.banner-section{
position:absolute;
z-index:1;
margin-top:-20px;
height:40px;
width:100%;
background-color:rgba(255,255,255,0.5);
}
End Result
The trick here is to have the middle div banner-section positioned absolutly, and with a margin-top value negative corresponding to half its height, giving us this end result:
Explanation
Since the element with the CSS class .banner-section gets positioned absolutely, it will rise above in the document stack order. So the elements .top-section and .btm-section stay one after the other.
An element with position:absolute will then need some extra css to keep up with the desirable appearence, like a width declaration and a height declaration to set its size.
Check if this one helps you
http://codepen.io/anon/pen/EJBCi.
<div class="outer">
<div class="topSec"></div>
<div class="midSec">Midcontent</div>
<div class="btmSec"></div>
</div>
CSS
.outer {
position: relative;
height: 400px;
text-align: center;
}
.topSec {
height: 50%;
background: red ;
}
.btmSec {
height: 50%;
background: yellow ;
}
.midSec {
position: absolute;
background: rgba(255,255,255,0.7);
z-index: 1;
top: 50%;
height: 60px;
margin-top: -30px;
left: 0;
right: 0;
line-height: 60px
}