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?
Related
I cannot figure out why this breaks it. I have an a element which uses CSS transitions to fade into a gradient background on hover. For whatever reason whenever I set the text color on hover to white the transition breaks?
.social-item {
margin-left: 0.25vw;
padding: 0.1vw;
transition: 0.2s;
color: white;
}
.social-item:hover {
background: linear-gradient(to left, #8E2DE2, #DC0486);
color: white;
}
<i class="fab fa-keybase"></i> Keybase
I'm also using Bulma and Font Awesome.
You can't simply make transitions with background gradients.
Animatable CSS Properties
Use pseudo-element and do an opacity transform.
.social-item {
position: relative;
color: white;
z-index: 1;
}
.social-item::before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to left, #8e2de2, #dc0486);
z-index: -1;
transition: opacity 0.5s linear;
opacity: 0;
}
.social-item:hover::before {
opacity: 1;
}
<i class="fab fa-keybase"></i> Keybase
A nice article about this.
Thank you!
What I figured your problem to be is that you're trying to do gradient transition. It is not supported. But if you want to simulate it, you can use the opacity property in css. Add opacity: 0 to the main element (.social-item) and opacity: 1 to the hover state (.social-events:hover). Hence the transition: 0.2 will apply on the opacity, as it is supported, thus simulating the desired outcome.
Thus the final css, shall be.
.social-item {
margin-left: 0.25vw;
padding: 0.1vw;
transition: 0.2s;
color: white;
opacity:0;
}
.social-item:hover {
background: linear-gradient(to left, #8E2DE2, #DC0486);
color: white;
opacity: 1;
}
If you actually want to have the thing display normally, and not just on hover, then opacity: 0 wont work for you. You have to use the pseudo-selector :after to add a dummy element to the main class and work all the transitions and background gradient stuff on that. Here is a codepen example.
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.
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".
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.
I put small images into a large image and use background-position to set the position of the small image in the large one.
When #nav_left_home is onhover, the background image position is changed from 0 32px to be 0 0.
#nav_left_home {
background-position: 0 32px;
background-image: url('../img/nav_left.png');
transition: background-image 0.5s ease-in-out;
}
#nav_left_home:hover {
background-position: 0 0;
}
With the above code, the red house would move up when onhover and the white house will appear under the red house and move up until replace the position.
But I only want to change the color of the image (no moving in position) as in the way color changes with transition.
The only way I know to achieve this is to slice your image as a "mask" and use CSS to transition between different background colors. By mask, I mean the color portion of your icon would be left transparent to form a kind of cutout that lays on top of a solid background color.
You need to show both images at the same time, and fade between the 2.
To get this, you need to set the alternate image in a pseudo element, initially transparent:
#nav_left_home {
background-position: 0 32px;
background-image: url('../img/nav_left.png');
transition: background-image 0.5s ease-in-out;
}
#nav_left_home:after {
content: "";
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-position: 0 0;
background-image: url('../img/nav_left.png');
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
#nav_left_home:hover:after {
opacity: 1;
}