Update I implemented the CSS Reset and to no avail. The answer by Kejko also did not help and instead made it worse. (Chrome now displays it incorrect with the change in styles)
This may be the problem since I know actual tables can not be positioned relative?
.chatIcons {
display: table;
}
End Update
I was about to have my site go live after I tested how each page looked on the major browsers and ran into a problem. The problem seems to be involved with the hover effect of the icons.
In chrome the icon section appears exactly how I want it to.
In FireFox it appears the same but once one it is hovered it only effects the third icon and the .iconInfo's overlay from staying relative to the parent, instead it is doing 100% width and height of the main parent container.
In IE 10-11 it keeps everything correct but once it is hovered the "overlay" is not 100% height anymore and the height actually varies.
Here is the css pertaining to the hover:
.iconInfo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
text-align: center;
opacity: 0;
transition: opacity 0.6s ease;
-webkit-transition: opacity 0.6s ease;
-moz-transition: opacity 0.6s ease;
}
.icon:hover .iconInfo {
opacity: 1;
}
I have included a fiddle to help, Demo
Try this:
.icon {
border-radius: 5px;
display: inline-block;
padding: 15px 0;
position: relative;
vertical-align: middle;
width: 32.99%;
}
That should fix your problem.
Related
I have a button with a ::before pseudo element as a background, to achieve an animated hover effect, and above this button there's a carousel with adaptive height.
My problem is that when the user changes the slide to another with a different height, the button realocation shows some problems, and the worst is that I can't reproduce it on Codepen (I tried here but the glitch is not happening), so I captured the glitch and posted on YouTube, you can see the video clicking here.
By the way, this is the relevant CSS I have in the button:
.btn-block{
position: relative;
transition: .15s ease-out;
transition-property: color;
}
.btn-block::before{
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background-clip: content-box;
transition: .15s ease-out;
transition-property: background, padding, border-radius;
}
.btn-block:hover::before{
padding: 8px 10px;
}
Is there something I can do about this glitch, or is there another way to achieve the hover effect I want?
I'm not great at making websites but am trying to make my own. Basically i split my page up in two, the left side being a menu bar and the right side containing content. To get a 'cool' blur effect over my menu bar i overlay it with a coloured image, where as the user hovers over it, the opacity changes (with a transition).
It is working as intended except when you click on a link and a new page loads, it doesn't register the hover until you move the mouse, this means the opacity of the image is full until you move even a tiny bit, then it jumps to 0.
Ideally when a new page opens and your mouse is already in the left region, the opacity of the overlaying image would already be 0.
#left {
text-indent: 1cm;
width: 23%;
height: 100%;
position: fixed;
background: rgba(51, 51, 51, 1);
}
#right {
padding-top: 2cm;
width: 77%;
height: auto;
position: absolute;
right: 0;
background: white;
}
#img {
position: absolute;
opacity: 0.6;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color: #000;
left: 0;
}
#left:hover>#img {
opacity: 0;
}
I hope i have given enough information, thanks in advance
Bas
How do you 'load' the page? is it ajax.load or? because if so, that language is already in use and therefor better to make a hover handler function in there because there is no way your CSS file is gonna notice on load wether the mouse is on your picture already or not untill you`ve moved it
Sorry i cant put comments down therefor i wrote here.
I'm working on the metro tiles menu for website, I cant use any JavaScript only html and css.
Problem is with sliding tiles and direction of slide, furthermore when box slide next one is hiding under.
#block4 - DOWN
#block5 - UP.
#block4:hover {
position: absolute;
z-index: 2;
background: rgba(150,150,150,0.95);
width: 100%;
height: 50px;
overflow:hidden;
transition: height 450ms;
-moz-transition: height 450ms;
-webkit-transition: height 450ms;
height: 300px;
z-index: 2;
}
#block5:hover {
position: absolute;
z-index: 2;
background: rgba(150,150,150,0.95);
width: 100%;
height: 50px;
overflow:hidden;
transition: height 450ms;
-moz-transition: height 450ms;
-webkit-transition: height 450ms;
height: 300px;
z-index: 2;
Example on JSFiddle - https://jsfiddle.net/werk13/7tza9yqq/
Check this out.
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all; // this dude
transition-duration: .5s; // this dude
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); // this
}
Another Demo.
#toggle + label {
position:absolute;
cursor:pointer;
padding:10px;
background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin:20px 50px;
transition:all 500ms ease; // right here
}
#toggle + label:after {
content:"Open"
}
.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); // right here
padding:5em 3em;
}
If you want block#3 to float, you must not "change" the other elements around it, since the browser will "reposition" all elements upon any change you made.
Since you said you can't use any JS in the code - there are a few ways I see you can you to handle it:
1. Make the elements fixed position. This way the none of the elements will change when you hover other elements (and change their own style).
2. Use "hidden" elements. Create new element, which is exactly as #block4 - we will call id #block4dup - same content, same position - everything is the same. It will have an absolute position and opacity: 0. the :hover you want will be on #block4dup:hover, and this will change the opacity/height and everything you need. This element will also be positioned absolute, so it will not affect your other floating elements on that page.
Not such a good solution (much duplicate content) but since you can't use any JS here they will both work and give you "good" results.
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
There are couple of similar questions around. But here's a little change in the case.
I am using CSS3 transition to show a small div in the bottom of the page. When I set the class .show, it slides up and when I remove it, it slides down and goes out of the page.
.bar {
transition: bottom 0.3s ease-out, opacity 0.3s;
opacity: 0;
bottom: -44px;
}
.bar.show {
opacity: 0.85;
bottom: 0;
transition: bottom 0.3s ease-out, opacity 0.3s;
}
My problem is, though it goes away, it still is a display:block element. Which causes my body have scroll. Is there any way by which I can set display:none (using CSS only) after transition? Or some how convince body not to have scroll? (I already have overflow: hidden).
Since transition-delay don't work on display property. I tried visibility, but still the browser keeps some space for scroll.
Update:
Just incase we don't find any good solution, I've done it this way for now instead of display: none.
.bar {
transition: max-height 0s linear 0.3s, bottom 0.3s ease-out, opacity 0.3s;
opacity: 0;
bottom: -44px;
max-height: 0;
overflow: hidden;
border-top-width: 0;
padding: 0;
}
.bar.show {
opacity: 0.85;
bottom: 0;
max-height: 50px;
padding: 5px;
border-top-width: 1px;
transition: bottom 0.3s ease-out, opacity 0.3s;
}
Here's something that could be useful, I've essentially implemented this via position:fixed, check this fiddle to see if it's something that meets your requirements - http://jsfiddle.net/7x0oajv2/
Second approach could be using position:absolute with a overflow:hidden on the body like so - http://jsfiddle.net/7x0oajv2/1/
I would try to set the margin as following:
height of the division = x
margin-bottom: -x;
Not sure if this works but I think it should. Otherwise you might use
position: fixed;
Or the third possible solution would be to not let the division slide out at the bottom but on the left side. This can be done like this:
.bar {
transition: bottom 0.3s ease-out, opacity 0.3s;
opacity: 0;
left: -100px;
}
If you want to change CSS dynamically you must use JavaScript or jQuery to change DIVs property.
E.g
$.("#myDiv").removeClass('displayBLOCK');
$.("#myDiv").addClass('displayNONE');
CSS:
.displayNONE{
display: none;
}
.displayBLOCK{
display: block;
}
If you just want to remove the div, call $.('#myDiv').hide(). You don't need to set display property to "none".