I have written some css for some elements, and it is causing some unexpected behaviour. I am using:
transition: 0.2s;
When refreshing the page, the element with this css property, unexpectedly start off in another area of the page, and move to their set positions (set in other parts of my css). The,
position: absolute
property is used to position the elements, what could be causing this unexpected behaviour?
Here is the CSS for the link:
.subLinks_links {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
text-align: left;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
font-size: 13px;
color: #999;
margin-bottom: -1px;
cursor: pointer;
text-transform: uppercase;
}
.subLinks_links > span {
margin-left: 30px;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.subLinks_links:hover > span {
margin-left: 40px;
}
And the relevant HTML for the css:
<div id="subLinks">
<div class="subLinks_links_selected"><span>Link Text</span></div>
<div class="subLinks_links"><span>Link Text</span></div>
</div>
I have found that it was a positioning issue. I was using text-align and margin-left to position the elements. There was no dead positioning, which caused the unwanted behaviour.
I think I'm running into a similar issue. You're using the shorthand transition property which is actually translating to transition: all 0.2s ease 0.2s;. The all is important here. This means that the transition you are using for whatever reason (e.g. hover effects, etc.) is also applying itself to other css properties. In this case, the elements are being specifically targeted to change the layout, and since these properties are overriding the defaults there is a transition from the default to your css for every single property that changes.
I know you already found a fix for your case, but this is a possible solution for others who may stumble here later.
Related
So I have this transition on hover, that makes a border at the bottom of the element that is being hovered over. All is well there, but when the mouse leaves the element, the border simply disappears, while I want it to "retract" back again. Codepen
HTML:
<div class="object">
<p>Object</p>
</div>
CSS:
* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}
p {
width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}
p:hover {
border-bottom: 5px solid white;
}
How would I go about doing this, as simple as possible?
Thank you ;3
Transitions work in both directions automatically.
The problem you are experiencing is that border-style is not a property that can be animated so it changes instantly.
This means that when you hover it, it becomes solid instantly and then spends time becoming 5px.
But when you unhover it, it becomes none instantly and you can't see the width animating.
Make the default (non-hovered) state explicit so that the border-width is the only thing that changes when you hover it.
Add:
border-bottom: 0px solid white;
to the rules for p.
I don't know if this could help, but in my case I just did like this:
Over:
.<nameOfClass>:hover{
transition: width 0.4s ease-in-out;
}
No over:
.<nameOfClass>:not(:hover){
transition: width 0.4s ease-in-out;
}
Add border-bottom: 0px solid white to p. Css wants to know where to transition back to! :D
for transition add an animate class to the element you want the transition
.animate
{
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
}
Now when you add this class to your element it will make transition in both hover and hover out.
I have been trying to design a login form and the button requires a little transition effect. There is one complexity though.
Background: I originally copied this idea from here: original form.
Notice how there is no padding (left and right) on the main container, now in my demo it was critical to have padding left and this creates a problem (will explain further).
Now here's my demo:
My version of login form (don't be scared of the 108 lines of CSS code; I'll paste the code that pertains to my problem below).
So the code that's relevant to this problem is as follows.
The HTML code:
<button class="login-button"><span>SEND</span></button>
The CSS code:
.login-button{
width: 100%;
outline: none;
border:none;
cursor: pointer;
padding: 0;
margin:0;
transition:.3s;
}
.login-input , .login-button{
height: 50px;
line-height: 40px;
transition:.3s;
}
.login-button span{
display: block;
background:red;
height: 100%;
width: 100%;
left: 0;
transition:.3s;
position: relative;
}
.login-button span:before{
content: 'ok';
position: absolute;
left: 100%;
display: block;
}
.login-button:hover span:before{
content: 'OK To go now';
position: absolute;
/*left: 0%;*/
text-align: center;
display: block;
width: 100%;
height: 100%;
}
Now if I go to the CSS styling for the main container:
I.E.
.main-login{
min-width: 200px;
max-width: 400px;
background: #533e69;
margin: 100px auto;
text-align: center;
overflow: hidden;
box-shadow: 1px 1px 10px rgba(0,0,0,.2);
padding: 0 20px;
}
and take off the padding, then the problem is solved and the transition looks perfect.
The problem
My requirements are such that I need that padding, so now what happens is when you hover over the button and the span element moves left:-100%, it's still visible in the main container.
Proposed solution
I would like it if this problem can be solved in CSS only as I don't really like cluttering my doc's with JS. So how about this.
I am new to CSS, so my solution may be less elegant:
When hovered over the button, the span overs left:-100% and than if the span can be set to display:none. Sounds simple, but my limited knowledge of CSS has got me stuck here.
You need to set the background to be transparent. It's not possible for a transition to animate the display property.
Add this css code, and it should work:
.login-button:hover span{
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
transition: 2s;
background: rgba(1,1,1,0);
}
See your updated fiddle here.
Edit: I cleaned up the css a bit:
.login-button:hover span{
transition: 0.3s;
background: transparent;
}
Fiddle is here.
Transition properties are comma delimited in all browsers that support transitions:
.nav a {
-webkit-transition: color .2s, text-shadow .2s;
/* And so on... */
}
Ease is the default, so you don't have to specify it. If you really want linear, you will need to specify it, i.e. -webkit-transition: color .2s linear, text-shadow .2s linear;
Or try this
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
This is the link
Here is the site I'm working on: revistapuerto
It's a Wordpress based site. What I'm trying to achieve through CSS, is to get the excerpt to appear over the picture when you hover over the Title of the post. Right now, the excerpt appears when you hover over the picture only. Want to keep that effect, and add the Title thing.
The picture - excerpt effect I got it from another user here, and here is the CSS in case it helps:
#magia {
position: relative;
}
#magia img {
display: block;
}
#magia .cornerLink {
width:494px;
height:330px;
opacity: 0;
position: absolute;
top: 32px;
left: 0px;
right: 0px;
padding: 0px 0px;
background-color: rgba(0,0,0,0.50);
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#magia:hover .cornerLink {
opacity: 1.0;
}
Thanks!
Honestly the question isn't very clear, you're gonna need to give more information. All I can really offer in regards to what you've asked is basic fiddle: http://jsfiddle.net/MBLZx/
HTML:
<div class="showhim">HOVER ME
<div class="showme">hai</div>
<div class="ok">ok</div>
</div>
CSS:
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
.showhim:hover .ok{
display : none;
}
(also the website won't load for me, could just be my work computer!)
that shows how to use hidden divs to make divs appear using a hover.
More information and I might be able to help you out :)
If I understood what you want, here's how you can achieve it.
#div-for-hover:hover #Div-you-want-to-show {
display: block;
}
The method is simple: The block of CSS code simply says when you hover of #div-for-hover, I'll show #Div-you-want-to-show
Note: The hover could be on a headings, DIVs, images, and more.
please check out this code in jsfiddle
HTML:
<div id="main">
<div id="menu">
Home
About Us
Pictures
Contact Us
</div>
</div>
CSS:
#main
{
width: 64em;
height: 25em;
}
#menu
{
background-color: #00b875;
height: 3em;
}
.buttons
{
text-decoration: none;
color: #ffffff;
line-height: 3em;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.buttons:hover
{
background-color: #0d96d6;
}
when switching from one button to another very quickly, you'll notice that there is actually some gap in between two buttons. i want to get rid of this space. any ideas? if you do answer the question, please also explain why a certain property will fix this.
i know that it is tweakable using padding and margin, but the result is likely to get distorted upon zoom. please point out a stable way of solving the problem.
thanks
Look at this jsFiddle
I've updated display:inline-block; to display:block; on the menu links and added float:left to them.
When you use inline-block you will have this ugly inline gap between elements caused by the whitespace between the elements in your HTML markup..
Any whitespace between tags in HTML is collapsed into a single space character, which is why you have that gap.
You could:
Float your elements left,
Put the </a> and <a> next to each other in the source or
Use a font-size: 0 trick
In this case, personally I'd float all my <a>s left although removing whitespace from your source comes with the fewest caveats, the only one being that it's more difficult to read.
Get rid of the spaces themselves: this may look messy but actually it's the cleanest thing you can do. Anything you achieve with CSS tricks is just putting the spaces there and then denying their existence. Instead, you might want to omit them; the only problem to solve is readability.
So let's make it readable:
<div id="main">
<div id="menu">
<!--
-->Home<!--
-->About Us<!--
-->Pictures<!--
-->Contact Us<!--
-->
</div>
</div>
Again, I know it seems weird, yes, but think about it. The real weirdo here is HTML itself, not giving you a clear way to do this. Consider it a special markup! It could as well be part of the HTML standard; technically, btw, it is 100% standard, you are free to use comments...
here is your solution
http://jsfiddle.net/NPqSr/7/
.buttons
{
text-decoration: none;
color: #ffffff;
line-height: 3em;
display: inline-block;
padding-left: 10px;
float:left;
padding-right: 10px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
It's 2017: wrap them inside an element with display: inline-flex and flex the inner buttons with something like flex: 0 1 auto:
<div style="display: inline-flex">
<button style="flex: 0 1 auto">...</button>
Try this(JSFiddle)
CSS
#main {
height: 25em;
}
#menu {
background-color: #00b875;
height: 3em;
}
.buttons {
text-decoration: none;
color: #ffffff;
line-height: 3em;
display: inline-block;
padding-left:5px;
padding-right:5px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.buttons:hover {
background-color: #0d96d6;
}
I think with latest CSS possibilities a cleaner solution is to use display:inline-flex on menu and display:flex on buttons, and maybe width:100% on menu:
http://jsfiddle.net/NPqSr/212/
Add the below style to your button. If required, make the margin negative for first of the few buttons.
button{
margin: 0px;
}
If using bootstrap, can group buttons together by wrapping in div with class="btn-group".
Example for v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single
Visually might or might not be what you want. Has rounded corners on left and right ends and straight line between buttons.
I have the html:
<div class="social-section">
<i></i>
<i></i>
</div>
I'd like to have the icon fade to a different color when moused over, using a CSS3 transition. Unfortunately, I'm not sure how to make this work, if it's possible. My current attempt at the css is:
.social-section * i:before { /* Apply this to the i:before, when the a is hovered */
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.social-section a i:before {
color: red;
}
.social-section a:hover i:before {
color: black;
}
In case this is helpful, here's the relevant section of the Glyphicons font css code:
.glyphicons {
display: inline-block;
position: relative;
padding: 0 0 5px 35px;
*display: inline;
*zoom: 1;
}
.glyphicons i:before {
position: absolute;
left: 0;
top: 0;
font: 20px/1em 'Glyphicons';
font-style: normal;
color: red;
}
A pseudo-code, since I'm not sure how it should act based on your quesiton...
put the transition css code you have in the element you want to affect (i.e. not the parent)
#child {
// transitions....
}
then do
#parent:hover #child {
// your changes
}
When the parent element is hovered, make changes to the child. The child's existing transition effects will be used for this, which I think is your goal.
Also, if you're going to be transitioning between icons, you'll need to change the position of the sprite-image, which I assume you're using, not changing the color style.
The answer is that pseudo elements aren't capable of transitions on most versions of most browsers. This issue is so frustrating that Chris Coyier (of css-tricks.com) is keeping a page open on the current status.
As of time of writing, transitions on pseudo elements are supported by:
Firefox 4.0+
Chrome 26+
IE 10+
You can confirm this on your browser.