As you can see there are some problems with the rendering in chrome. And only on some of the list items.
Can someone give me some suggestions on whats happening.
&:after {
transition: 0.5s;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: url('');
color: transparent;
background: $blue;
height: 1px;
}
I think you should have put Html file, too.
By the way check if the parent of this element contains "position: relative" or not?
And you don't need to set a margin value for it
Related
I have been hitting my head against a brickwall with this issue.
I have tried using this line of code to create an underline on hover effect with CSS using Elementor. I've tried it with a button widget and a Text Editor widget but can't seem to get it to work at all. What am I missing?
Any help would be really helpful.
Thanks
:
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: -5px;
background: #000;
height: 4px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
right: 0;
}
Your code almost works - the problem is the transition-property. You have left right which is not legal CSS. And in fact you only want to transition the right property, the underline stays anchored at the left side.
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline::after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: -5px;
background: #000;
height: 4px;
transition-property: right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover::after,
.underline:focus:after,
.underline:active:after {
right: 0;
}
<div class="underline">Hover over me</div>
It can be helpful to run your code through the relvant validator. In this case I used the W3C CSS validator which picked up the error.
Although you can transition (animate) the right property as you have done it is often more performant (in CPU/GPU usage sense) to use transforms such as scale or translate to shrink/grow or move things.
The white gap seems to be a popular issue. Yet I dont seem to be able to solve it with conventional solutions.
link to website https://bomengeduld.github.io/debadkamers/
link to style.css: https://github.com/bomengeduld/debadkamers/blob/master/style.css
(use inspector in mobile view) to detect the bug:
.mainmenu-area {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999999;
-webkit-transition: 0.3s;
transition: 0.3s;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px !important;
padding: 0px !important;
}
When I use the following it gets fixed, but then I loose the styling of menu bar.
overflow-x: hidden;
The following solved my problem
.container {
overflow: hidden;
}
I'm trying to build a gallery where every image has a hover effect (this one). When I jhover the image and click the link inside , a bootstrap modal opens showing some content.
Until here works fine, however, when I close this modal, the image is not displaying properly in the main page. You can see my problem here:
http://www.bootply.com/90dGFlCrxI
Can anyone explain me what am I doing wrong?
Thanks very much guys!
The issue seems be the
overflow: hidden;
in this css rule:
.effect figure {
margin: 0;
position: relative;
/*overflow: hidden;*/
text-align: left;
}
if you remove the issue is fixed.
another work around:
.effect figcaption {
position: absolute;
width: 100%;
left: 0;
padding: 7px;
background: #26BC8A;
color: #ed4e6e;
height: 50px;
top: auto;
bottom: 0;
opacity: 0;
/* transform: translateY(100%); */
/* transition: transform 0.4s, opacity 0.1s 0.3s; */
}
the translateY is not working as expected.
An element has the following CSS property:
#mask {
display: none;
background: transparent;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}
and another element which is supposed to appear on top of it:
.login-popup {
display:none;
position: fixed;
z-index: 99999;
}
It turns out just fine on FireFox. On Chrome, this #mask is being projected above everything else. Chrome is Version 24.0.1312.70. What could be wrong?
Note: Both the elements are manipulated using JavaScript. The JavaScript does not interfere with the Z-index property in any way.
jsfiddle: http://jsfiddle.net/zbesr/8/
This happens because #mask has opacity less than 1.. New stacking orders apply when you have opacity. Interesting article that describes exactly why this happens:
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
I am currently running into a problem when trying to implement a simple rollover using CSS :after and :hover pseudo-elements.
Have a look at the clock and facebook icons to the right: http://clean.philippchristoph.de/
Here's the CSS code:
.icon {
background: url('../img/clock_icon.png') top left no-repeat;
width: 25px;
height: 25px;
}
.icon:after {
.transition(opacity, .2s, ease);
content: " ";
position: absolute;
top: 4px; left: 5px; bottom: 0; right: 0;
background: url('../img/clock_icon.png') no-repeat;
background-position: -25px 0;
opacity: 0;
}
.icon:hover:after, .clock:hover div {
opacity: 1;
}
As you can see, the image is faded using a sprite and opacity. However, now I can't seem to hover both elements anymore. As you will see on the example page, you can hover over the facebook icon, but not over the clock. If you remove the facebook icon, you can hover over the clock again. Note that the two icons are entirely seperate elements.
I've tested this behavior on both FF and Chrome on Windows.
It'd be awesome if someone could shed some light onto this issue.. :)
Replace your CSS with this one (I mean the mentioned classes only, not your entire CSS :) ):
.icon {
background: url("../img/clock_icon.png") no-repeat scroll left top transparent;
height: 25px;
width: 25px;
position: relative
}
.icon:after {
-moz-transition: opacity 0.2s ease 0s;
background: url("../img/clock_icon.png") no-repeat scroll -25px 0pt transparent;
bottom: 0pt;
content: " ";
left: 0;
opacity: 0;
position: absolute;
right: 0pt;
top: 0;
}
.icon:hover:after, .clock:hover div {
opacity: 1;
}
.facebook, .facebook:after {
background-image: url("../img/facebook_icon.png");
}
.clock {
position: relative
}
.clock div {
-moz-transition: opacity 0.2s ease 0s;
color: #A0A0A0;
font-size: 12px;
left: 40px;
line-height: 11px;
opacity: 0;
position: absolute;
top: 5px;
width: 160px
}
You need to add position: relative to your icon class, so that the generated content is positioned relative to that, rather than the parent. I've tried to simplify what you have in a fiddle, though I wasn't 100% sure what you are after. Is that close? I also amended the positioning of the generated content.
It's worth noting that - annoyingly - you can't apply a transition to generated content (which is why any attempt to have the opacity transition on these elements will fail in your case). Hopefully this will change soon.