Currently I have images as checkboxes which I can click then a yellow border comes up with transition.
Obviously it changes the margin stuff and everything when the border comes up so i set a default margin of 3px wich goes away when the border is comming(the border is 3px too)
but since i used transition onto the border it grows up and while the border is growing all the images are shuttering and shaking :D
So now i would have to make the border be there instantly on 3px as soon as i klick it but it shouldnt instantly show as 3px...
i have no idea how to do that here's my current css
theres a little part of the css missing but stack overflow doesn't let me upload it because it doesn't accept it as code....
img{
width: 100%;
max-width: 380px;
border: 3px solid rgba(255.0.0.0);
background-color:black;
height: 100%;
max-height: 250px;
margin: 3px;
border-radius:15px;
transition:opacity 2s ease, border 1s ease;
opacity: 0.5;
}
<img src="http://placehold.it/380x250" />
Why not just have the border there as transparent and the just transition the ``border-color`?
img {
width: 100%;
max-width: 380px;
border: 3px solid transparent;
height: 100%;
max-height: 250px;
margin: 3px;
border-radius: 15px;
transition: opacity 2s ease, border-color 1s ease;
opacity: 0.5;
}
img:hover {
border-color: red;
}
<img src="http://placehold.it/200x200" />
If you want not to break layout while adding border, you may consider using
box-shadow
instead of border property, and transitioning this.
$('.box').on('click', function() {
$(this).addClass('box--checked');
});
.box {
width: 120px;
height: 120px;
transition: box-shadow .3s linear;
margin-bottom: 12px;
background-color: #DDD;
box-shadow: 0px 0px 0px 0px darkorange;
}
.box--checked {
box-shadow: 0px 0px 0px 6px darkorange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="box box--one">A</div>
<div class="box box--two">B</div>
<div class="box box--three">C</div>
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>
I am in the process of designing an animated menu. I tried to get the text in the boxes to change color and they do so, but it's rather glitchy. The text flashes after the transition, and when you hover over it. Here's the JsFiddle with the glitch.
I also noticed it works fine without the hover transition, except of course the text doesn't change color. Here's that one: Less glitchy one.
Please suggest a fix.
Glitchy code [I removed webkit]
/* CSS */
#keyframes box {
0% {
left: 0px;
width: 30px;
}
50% {
left: 30px;
width: 0px;
}
100% {
left: 30px;
width: 70px;
color: #FFF;
}
}
h1 {
position: relative;
left: 30px;
color: cyan;
font-family: 'Agency FB';
}
div {
position: relative;
height: 30px;
width: 0px;
left: 0px;
background-color: cyan;
color: transparent;
animation: box 1.0s forwards;
transition: all 0.5s ease;
}
div:hover {
background-color: #FFF;
border: 1px solid cyan;
}
div:hover label {
color: cyan;
}
label {
position: absolute;
left: 5px;
font-family: 'Agency FB';
transition: all 0.5s ease;
}
<!-- HTML -->
<h1>
Test
</h1>
<div id="1">
<label>Hello</label>
</div>
<br>
<div id="1">
<label>World</label>
</div>
<br>
<div id="1">
<label>Foobar</label>
</div>
I can see the glitch, but probably is because of this:
transition: all 0.5s ease;
maybe you have other color fot the text in the parent, if you only want the transition on the background-color useit only there
transition: background-color 0.5s ease;
andto avoid the change of height you can use this
box-sizing: border-box;
I don't know what exactly you mean by "glitchy".
First of all I would change:
border: 1px solid cyan;
To:
outline: 1px solid cyan;
Border made this div move a little bit when hover works.
Demo
.common_button:active
{
box-shadow: 0px 3px 3px -2px #777;
padding: 3px;
width:80px;
}
.common_button_container
{
border: 1px solid;
width: 100px;
padding: 7px;
}
I am trying to create button-pressing effects. But I don't want this effect to affect it's container. i want to have only width and height reduced on button while pressing but not for the container. Any idea?
You could just hard set the height of the .common_button_container by adding height: 30px; to it.
If the size of the container is not specified, use this:
.common_button_placeholder
{
background-color: transparent;
color: transparent;
}
.common_button
{
position: absolute;
}
.common_button:active
{
box-shadow: 0px 3px 3px -2px #777;
padding: 3px;
width:80px;
}
.common_button_container
{
border: 1px solid;
width: 100px;
padding: 7px;
}
<div class="common_button_container">
<div class="common_button">Submit</div>
<div class="common_button_placeholder">Submit</div>
</div>
The common_button is set to absolute; common_button_placeholder not. So common_button_placeholder is behind the orginal, it set the size of the container, but common_button has no further effect to it.Just for the styling, how about using transition:
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
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.
So I am having trouble getting the transition to work here, on hover works to switch the images, and I have used this transition another site and works just fine when used on the same machine and browser however on this site I am building currently the transition is not having it.... Here is the HTML& CSS
<div class="grid_4">
<h3 class="foot">
Say Hello!
</h3>
<h3 class="descripfoot">
<div class="grid_2">
<a class="testicon" title="flickr Link" align="left" href="http://www.flickr.com"></a>
</div>
some description text goes hereeeee
</h3>
</div>
a.testicon
{
background: url("../images/testicon.png");
width:140px;
height: 140px;
border-radius: 7px 7px 7px 7px;
display: inline-block;
}
a.testicon:hover,a.testicon:focus,a.testicon:active
{
width:140px;
height: 140px;
border-radius: 7px 7px 7px 7px;
display: inline-block;
-webkit-transition: background .3s linear 0s;
-moz-transition: background .3s linear 0s;
background: url("../images/testicon2.png");
}
This works fine for me: http://jsfiddle.net/LWsVt/2/
a.testicon
{
background: url(http://lorempixel.com/200/200) center center no-repeat;
background-size: 200px 200px;
width:140px;
height: 140px;
border-radius: 7px 7px 7px 7px;
display: inline-block;
-webkit-transition: background .3s linear 0s; /* obviously declare all vendor prefixes here */
}
a.testicon:hover,a.testicon:focus,a.testicon:active
{
background-image: url(http://lorempixel.com/400/400);
outline:none;
}
Note I simplified the CSS and got rid of redundant property declarations.