I would like inner div to fill the outer div. I was told to use a negative padding on the child, which sounds logical but doesn't work in my case. I believe this is due to the transitions that I am using on the parent and child divs.
I have the child to go from transparent to not transparent on a hover. I have the child's background image transitioning from the parent's background image. I want to add padding to the parent so that I can customize the height of the div, however when I do, the child doesn't fill the parent. When I add a negative margin to the child, there is no effect.
.outer{
font-size: 2em;
border: 2px solid #898080;
margin-bottom: 40px;
border-radius: 20px;
text-shadow: 5px 5px 5px #000000;
position: relative;
display: inline-block;
transition: all 1s ease-in-out;
background-color: black;
padding: 30px 0px 30px 0px;
}
/* Scale up the box */
.outer:hover {
color: white;
border: 2px solid #d8e6ee;
transform: scale(1.1, 1.1);
transition: background .5 ease;
opacity: 1;
}
#inner{
zoom: 1.0;
border-radius: 17px;
text-shadow: 5px 5px 5px #000000;
background-color: red;
opacity: 0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
#inner:hover{
opacity: 1;
}
<div class="outer">
<div id="inner">Hello World</div>
</div>
Ok, so you are trying to set the dimensions of an element trough the use of padding, but you want the content of that element to ignore the padding. I guess, if you put it that way it becomes quite obvious that padding is not the right tool here. All you have to do is set the dimensions of the child, and by definition the parent will follow.
In code that would mean, move the padding from the .outer to the #inner.
Related
Per the title, you can see a demo of the issue here.
Here is the HTML code:
<div id="outer">
<div id="inner">
</div>
</div>
Here is the CSS code:
#inner{
height: 100%;
width: 100%;
border-radius: 20px;
text-shadow: 5px 5px 5px #000000;
background-color: white;
opacity: 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#inner:hover{
opacity: 1;
}
#outer{
border: 6px solid #dcc5c5;
border-radius: 20px;
text-shadow: 5px 5px 5px #000000;
position: relative;
display: inline-block;
transition: all 0.5s ease-in-out;
background-color: red;
height: 200px;
width: 200px;
}
I've tried various suggestions here and here with no solution.
you are using margin-top:20px;
in this element
#inner {
height: 100px;
background-color: #42749F;
width: 200px;
/* -1px here for to compansate for the outer border of the container */
-moz-border-radius: 0 0 9px 9px;
}
remove margin and it will fill inside parent element
Working fiddle
The problem in that is that the child takes priority, if the parent div says:
text-font: Sans-Serif
but the child says:
text-font: Arial
the elements in the child sector take priority. In other words, the parent is the "Default". The same happens to "rounded corners" and "margin-top". The "margin-top" takes priority.
Just make sure that those two are correct.
I guess the border you've set on the inside division is creating problems here. Removing the border makes the child element fully fill the parent.
Is this what you were looking for? You may elaborate more if you want, in comments.
.box {
position: relative;
overflow: hidden;
border-radius: 20px;
transition: all 0.5s ease-in-out;
background-color: red;
height: 200px;
width: 200px;
}
.scratcher{
height: 100%;
width: 100%;
background-color: white;
opacity: 0;
transition: opacity .5s linear;
}
.scratcher:hover{
opacity: 1;
}
<div class="box">
<div class="scratcher">Scratcher</div>
</div>
I noticed that if you offset the difference (6px) in border-width of the containing element (.box_1 / #outer), with the border-radius of the nested element (#scratcher / #inner), you will fill up the corner gaps.
Deduct 6px from the border-radius value of the nested element (#scratcher / #inner).
#inner {
height: 100%;
width: 100%;
border-radius: 13px;
text-shadow: 5px 5px 5px #000000;
background-color: white;
opacity: 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#inner:hover {
opacity: 1;
}
#outer {
border: 6px solid #dcc5c5;
border-radius: 20px;
text-shadow: 5px 5px 5px #000000;
position: relative;
display: inline-block;
transition: all 0.5s ease-in-out;
background-color: red;
height: 200px;
width: 200px;
}
<div id="outer">
<div id="inner">
</div>
</div>
At my personal website, I'm using the CSS3 Transition property on the top nav to animate the margins and padding of an element with a border, to make the border swell on hover.
Relevant markup:
<nav>
<a class="email" href="mailto:notmyrealemailaddress">
<div class="icon-border">
<img src="images/mail_icon.png" width="14" height="12">
</div>Email Me</a>
<a class="phone" href="tel:4075555555">
<div class="icon-border">
<img src="images/phone_icon.png" width="11" height="18">
</div>Call Me</a>
<a class="behance" href="http://behance.net/dannymcgee" target="_blank">
<div class="icon-border">
<img src="images/behance_icon.png" width="21" height="13">
</div>See My Work</a>
</nav>
CSS:
header nav .icon-border {
display: inline-block;
border: 2px solid #000;
border-radius: 30px;
padding: 5px;
margin: 0 10px;
transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;
}
header nav a:hover .icon-border {
padding: 10px;
margin: -10px 5px;
border: 2px solid #ddd;
transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;
}
See what it's doing? By decreasing the margins and increasing the padding on hover, the circular border effectively gets bigger without altering the position of the image it's wrapped around.
It works pretty well, but the problem is that if I quickly move the mouse from EMAIL ME to CALL ME and vice versa, before the first animation completes, the whole nav "jumps" up and down by about a pixel. However, this issue doesn't happen between CALL ME and SEE MY WORK, which leads me to believe it's an issue that can be fixed. Any ideas?
I believe the issue is because you are transitioning the margins (and using negative margins which is always a little wonky).
A smoother solution might be using transform: scale(x)
someting like:
header nav .icon-border {
display: inline-block;
border: 2px solid #000;
border-radius: 30px;
padding: 5px;
margin: 0 10px;
transform: scale(1); /* you need a scale here to allow it to transition in both directions */
transition: 0.15s all ease;
}
header nav a:hover .icon-border {
transform: scale(1.2);
border: 2px solid #ddd;
}
Maybe this works:
header nav a {
display: inline-block;
}
div {
transition: all 0.5s ease;
padding: 13px;
}
div:hover {
padding: 23px;
}
or
* { transition: all 0.5s ease; }
div {
padding: 13px;
}
div:hover {
padding: 23px;
}
I have been trying to create a button in CSS that appears to look "pushed down" on :active, to do this, I added 2px to padding-top and subtracted 2px from padding-bottom. However, this seems to add a margin to other elements, though I cannot figure out why.
I'm sure the solution is a simple one to experienced CSS-users.
http://jsfiddle.net/hTTWq/
You are using inline-block on the buttons who's default alignment is 'baseline`.
Try changing this by adding this to your buttton CSS
vertical-align: top; /* or middle or bottom */
JSfiddle Demo
Many ways to do this, but to move the whole button (and not just the text), you could do something like this, which alters margin-top rather than padding:
*:active, *:focus {
outline: none;
}
button {
display: inline-block;
margin: 0;
border: 0;
padding: 8px 16px;
border-radius: 4px;
background-color: #a9a9a9;
color: #fff;
overflow: hidden;
transition: padding-top 100ms linear, padding-bottom 100ms linear, box-shadow 100ms linear, -webkit-filter 100ms linear;
vertical-align: top;
}
button.suggested {
background-color: #0074d9;
}
button:active {
-webkit-filter: brightness(0.5);
margin-top: 2px;
box-shadow: 0 2px rgba(0, 0, 0, 0.5) inset;
vertical-align: bottom;
}
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 6 years ago.
I have been trying to use css to show a Hidden Div fade in whenever I hover its parent element.
So far all I have managed to do was to get the hidden div to show, but there are no easing transitions what so ever.
Here is my Code on JSfiddle http://jsfiddle.net/9dsGP/
Here is my Code:
HTML:
<div id="header">
<div id="button">This is a Button
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
CSS:
#header #button {width:200px; background:#eee}
#header #button:hover > .content {display:block; opacity:1;}
#header #button .content:hover { display:block;}
#header #button .content {
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
opacity:0;
clear: both;
display: none;
top: -1px;
left:-160px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
Any clue as to what Im doing wrong? Just trying to get a smooth effect for the hidden content when I hover over the button. Thanks in advance!
display:none; removes a block from the page as if it were never there.
A block cannot be partially displayed; it’s either there or it’s not.
The same is true for visibility; you can’t expect a block to be half
hidden which, by definition, would be visible! Fortunately, you can
use opacity for fading effects instead.
- reference
As an alternatiive CSS solution, you could play with opacity, height and padding properties to achieve the desirable effect:
#header #button:hover > .content {
opacity:1;
height: 150px;
padding: 8px;
}
#header #button .content {
opacity:0;
height: 0;
padding: 0 8px;
overflow: hidden;
transition: all .3s ease .15s;
}
(Vendor prefixes omitted due to brevity.)
Here is a working demo. Also here is a similar topic on SO.
#header #button {
width:200px;
background:#ddd;
transition: border-radius .3s ease .15s;
}
#header #button:hover, #header #button > .content {
border-radius: 0px 0px 7px 7px;
}
#header #button:hover > .content {
opacity: 1;
height: 150px;
padding: 8px;
}
#header #button > .content {
opacity:0;
clear: both;
height: 0;
padding: 0 8px;
overflow: hidden;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
border: 1px solid #ddd;
-webkit-box-shadow: 0px 2px 2px #ddd;
-moz-box-shadow: 0px 2px 2px #ddd;
box-shadow: 0px 2px 2px #ddd;
background: #FFF;
}
#button > span { display: inline-block; padding: .5em 1em }
<div id="header">
<div id="button"> <span>This is a Button</span>
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
You cannot use height: 0 and height: auto to transition the height. auto is always relative and cannot be transitioned towards. You could however use max-height: 0 and transition that to max-height: 9999px for example.
Sorry I couldn't comment, my rep isn't high enough...
I found a solution while tinkering around.
People who directly wanna see the results:
With click: https://jsfiddle.net/dt52jazg/
With Hover: https://jsfiddle.net/7gkufLsh/1/
Below is the code:
HTML
<ul class="list">
<li>Hey</li>
<li>This</li>
<li>is</li>
<li>just</li>
<li>a</li>
<li>test</li>
</ul>
<button class="click-me">
Click me
</button>
CSS
.list li {
min-height: 0;
max-height: 0;
opacity: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.active li {
min-height: 20px;
opacity: 1;
}
JS
(function() {
$('.click-me').on('click', function() {
$('.list').toggleClass('active');
});
})();
Please let me know whether there is any problem with this solution 'coz I feel there would be no restriction of max-height with this solution.
I faced the problem with display:none
I have several horizontal bars with transition effects but I wanted to show only part of that container and fold the rest while maintaining the effects. I reproduced a small demo here
The obvious was to wrap those hidden animated bars in a div then toggle that element's height and opacity
.hide{
opacity: 0;
height: 0;
}
.bars-wrapper.expanded > .hide{
opacity: 1;
height: auto;
}
The animation works well but the issue was that these hidden bars were still consuming space on my page and overlapping other elements
so adding display:none to the hidden wrapper .hide solves the margin issue but not the transition, neither applying display:none or height:0;opacity:0 works on the children elements.
So my final workaround was to give those hidden bars a negative and absolute position and it worked well with CSS transitions.
Jsfiddle
Made some changes, but I think I got the effect you want using visibility. http://jsfiddle.net/9dsGP/49/
I also made these changes:
position: absolute; /* so it doesn't expand the button background */
top: calc(1em + 8px); /* so it's under the "button" */
left:8px; /* so it's shifted by padding-left */
width: 182px; /* so it fits nicely under the button, width - padding-left - padding-right - border-left-width - border-right-width, 200 - 8 - 8 - 1 - 1 = 182 */
Alternatively, you could put .content as a sibling of .button, but I didn't make an example for this.
max-height
.PrimaryNav-container {
...
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
...
}
.PrimaryNav.PrimaryNav--isOpen .PrimaryNav-container {
max-height: 300px;
}
https://www.codehive.io/boards/bUoLvRg
When you need to toggle an element away, and you don't need to animate the margin property. You could try margin-top: -999999em. Just don't transition all.
I styled a link so that when you hover it, there will appear a border on the top; and when you hover off the border will disappear with a transition. The border slides in instead of fading in when you hover over it and off. I want the border to fade in instead of slide. How can I do this? Here is a JsFiddle
HTML
<div>Text</div>
CSS
div {
line-height: 50px;
width: 100px;
text-align: center;
cursor: pointer;
transition: border .2s ease-in-out;
-webkit-transition: border .2s ease-in-out;
-moz-transition: border .2s ease-in-out;
}
div:hover {
border-top: 3px solid #000;
}
html, body {
margin: 0;
padding: 0;
}
If you want to animate the color, animate the color, not the entire border. You're now also animating it from 0 pixels to 3 pixels, so of course it slides in. You should just give it a default transparent border instead.
div {
line-height: 50px;
width: 100px;
text-align: center;
cursor: pointer;
transition: border-color .5s ease-in-out;
border-top: 3px solid transparent;
}
div:hover {
border-top-color: #000;
}
Sample on JSfiddle
As a sidenote: -moz-transition is obsolete nowadays, since FF17 or so Mozilla supports the CSS Transitions module without prefix.
Update dec 2014: as I noticed this answer is still being viewed and upvoted frequently, please note that transition is no longer prefixed in any current or recently superseded browsers.
In this case - you are going to need to have a border to begin with as well. Make it transparent in the first state. This way it will not "grow" into place... and the color will just fade as it changes.
http://jsfiddle.net/kLnQL/11/
div {
border: 3px solid transparent;
}
div:hover {
border: 3px solid #f06;
}