Why is the underline animation dependent on the <label> tag being present? In other words, if you remove the <label> from the mdl-textfield the animation is removed also.
Anyone else notice this?
It is because of this CSS rule in Text field section:
.mdl-textfield__label::after {
background-color: #3f51b5;
bottom: 20px;
content: "";
height: 2px;
left: 45%;
position: absolute;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
visibility: hidden;
width: 10px;
}
If you check the above transition property, the animation is done when the input is focused:
.mdl-textfield.is-focused .mdl-textfield__label::after {
left: 0;
width: 100%;
visibility: visible;
}
Note: If you need to remove the placeholder, Remove the text inside the label element, it will preserve the animation
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.
I want a transition on a wordpress menu item.
I plan to insert an icon before on hover...
Now I test this with a word and this works fine...
.academy .avia-menu-text:hover::before {
content:'Jetzt ';
transition:all 3s;
-webkit-transition:all 3s;
}
But the transition is not working. I need it with a smooth fade in. testfile
If I´m understanding your question correctly you want an annimated text before your element.
You can add this element without the hover state:
.academy .avia-menu-text:before {
width: 0;
transition: 3s;
content: 'your text';
}
.academy .avia-menu-text:hover:before {
width: 100%;
}
Here is a small example I made in a container
p:before{ content: 'hello world'; width: 0; display: block; overflow: hidden; transition: .3s; position: absolute; left: -100px; top: 0; white-space: nowrap;}
p:hover:before{ width: 100%; }
div{ width: 300px; height: 100px; }
p{ position: relative; left: 100px; }
<div>
<p>Text here</p>
</div>
How can I make that the hover option allows me to see the image with opacity and the p tag inside not affected by opacity style? Please note that the img is inside an input tag and when I click it a bootsrap modal will appear with input form
.img_wrap:hover
#updateImg{ opacity: 0.7; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img_wrap">
<input type='image' id='updateImg' src='http://placehold.it/350x150'>
</input>
<span></span><p class="imgText">Click here to change your image</p>
</div>
You need to handle each children's opacity separately. Also, if you want them overlapped, you need one of them (the text in my example, positioned absolute and the parent relative).
I'm guessing the following example does what you want to achieve? If not, please state your request clearer.
.img_wrap {
position: relative;
display: inline-block;
}
.img_wrap input[type="image"]{
opacity: 1;
display: block;
transition: opacity .3s cubic-bezier(.4,0,.2,1)
}
.img_wrap:hover input[type="image"] {
opacity: .3;
}
.img_wrap .imgText {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
opacity: 0;
transition: opacity .3s cubic-bezier(.4,0,.2,1)
}
.img_wrap:hover .imgText {
opacity: 1;
pointer-events: none;
}
<div class="img_wrap">
<input type='image' id='updateImg' src='http://placehold.it/350x150' />
<div class="imgText">Click here to change your image</div>
</div>
Notes:
<input> is a self-closing tag, so <input></input> is invalid.
<input type="image"> is supposed to be used instead of a (submit) button. It's a shortcut for a button with a background image, that resizes itself to the image ratio. If you want to submit an image to the server using an <input>, you probably want to use <input type="file" />
here is what you want
.img_wrap{
display: inline-block;
position: relative;
}
.img_wrap:hover #updateImg{
opacity: 0.7;
position: relative;
}
.img_wrap:hover .imgText{
position:absolute;
top:0;
bottom: 0;
left: 0;
right:0;
}
The solution is probably really simple but ahhh I just can't get it. I have a div with text in it which I placed right at the same location of an image. What is supposed to happen, and it does, is the image is supposed to fade out allowing the text to be more visible. The only thing is though, that I want the text to be hidden, and made visible only when the user hovers over the image/div text box. I tried a few things like
.display {
visibility: hidden;
}
img.artwork:hover + .display {
visibility: visible;
}
but that doesn't work because it just starts glitching. I can't use z-index either because neither the image nor the div text are in position: absolute or position: relative. Any ideas on how to fix this? This is what I have right now:
img.albumartwork:hover{
opacity: .15;
-webkit-transition: all 0.4s ease 0s;
}
.display {
font-size: 12px;
font-weight: bold;
width: 120px;
height: 120px;
color: rgb(220,221,229);
text-align: center;
margin-top: -120px;
margin-left: 52.5px;
background-color: rgba(0,0,0,0.6);
}
try to target color property on your :hover
SAMPLE
div {
color: transparent;
transition: 0.5s all ease ;
}
div:hover {
color: black;
}
div:hover img {
opacity: 0;
}
img {
width: 150px;
transition: 0.5s all ease ;
position: absolute;
left: 0;
}
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.