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>
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 am trying to make animation for the side menu. If I open the menu animation is working exactly how I want, the issue is, that I cannot make animation when I close it. Is there some property to make it animate back after the menu closes? Best would be if I could do it with css animations.
app.component.html
<app-menu *ngIf="showMenu"></app-menu>
Animation triggers when I toggle showMenu variable but it just disappear after I set it false.
menu.component.html
<div class="menu-panel" (click)="$event.stopPropagation();">
styles.scss
app-menu {
display: inline-block;
z-index: 100;
position: absolute;
height: 100vh;
width: 100vw;
}
#keyframes menu-panel {
0% {
background-color: #00FF9B;
left: -$menu-width;
}
100% {
background-color: #B290FF;
left: 0;
}
}
.menu-panel {
position: absolute;
display: inline-block;
width: $menu-width;
height: 100%;
background-color: #B290FF;
animation: menu-panel 500ms linear;
z-index: 100;
}
Try using transition instead. Control whether the panel is opened by a class .open. That's just the idea, try tweaking yourself to fits your need.
app-menu {
display: inline-block;
z-index: 100;
position: absolute;
height: 100vh;
width: 100vw;
}
.menu-panel {
position: absolute;
display: inline-block;
width: $menu-width;
height: 100%;
z-index: 100;
transition: all 500ms;
background-color: #00FF9B;
left: -$menu-width;
}
.menu-panel.open {
background-color: #B290FF;
left: 0;
}
This is my code:
<!DOCTYPE html>
<style>
a.nice-link {
position: relative;
color: #71ad37;
}
a.nice-link:after {
text-align: justify;
display: inline-block;
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #a5ff0e;
min-height: 200%;
height: 20%;
width: 0;
max-width: 200%;
-moz-transition: .3s;
-o-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
a.nice-link:hover {
color: #71ad37;
}
a.nice-link:hover:after {
width: 100%;
}
li {
display: inline-block;
}
.try{
width: 50px;
}
</style>
<div class = "try"><a class="nice-link" href=“http://katoliiklased.blogspot.com/2018/08/katekismuse-surmanuhtlust-kasitlev-uus.html“ data-text="Hello Bello Sello" target="_blank">Hello Bello Sello</a>
</div>
The point of the code is: if you hover your mouse over the link, it will put transition into work, so that the text will highlight from left to right.
It works OK if there is one line of text. But if there is more, the transition works only on the first line.
How to make it work on other lines also? Either so that 1) the transition begins with the first line and then continues for other lines or 2) the text will transition as whole, with all the lines at the same time from left to right
I appreciate your help!
Just remove the white-space: nowrap; in a.nice-link:after style.
Test it here.. https://jsfiddle.net/nimittshah/aqd6ev39/1/
I'm trying to make a grid of images that once you hover over one, it's webpage title appears below it, as well as the other images around it changing in opacity.
I have managed to create the opacity mouseover effect I want, but now I'm having trouble making the page heading images appear as you hover over the corresponding image. I hope that makes sense
Hope someone can help. Here is my code
HTML:
<div style="position: relative; left: 140px; top: 0px;">
<img src="window.jpg" style="position: relative; top: 0; left: 0;"/>
<div id="windowimages">
<a class="image-one"></a><a href="https://example-site.com/music/">
<img src="pic1.jpg/>
<a class="image-two"></a><a href="https://example-site.com/dance/">
<img
src="pic2.jgp"/>
<a class="image-three"></a><a href="https://example-site.com/art/">
<img
src="pic3.jpg" />
<a class="image-four"></a><a href="https://example-site.com/aboutus/">
<img
src="pic4.jpg"/>
</div>
CSS:
body {
}
#windowimages {
position: absolute;
left: 3px;
top: 4px;
font-size: 0;
width: 198px;
margin: 0 auto;
padding:1px;
overflow:hidden
}
#windowimages img {
width:90px;
height:90px;
margin: 3px;
cursor:pointer;
-webkit-transition:opacity 0.26s ease-out;
-moz-transition:opacity 0.26s ease-out;
-ms-transition:opacity 0.26s ease-out;
-o-transition:opacity 0.26s ease-out;
transition:opacity 2s ease-in-out;
}
#windowimages:hover img {
opacity:0.55;
}
#windowimages:hover img:hover {
opacity:1;
}
If I understood you correctly, it seems like what you want to do is add a title to each image on hover.
Check out this example I wrote: http://jsfiddle.net/arthurcamara/chbsL3pq/
The key part to adding the title was .image:hover:after as you can see above and in the code below:
.grid:hover .image:hover:after {
display: block;
position: absolute;
top: 5px;
width: 90px;
padding: 5px;
content: attr(data-title);
text-align: center;
background-color: #333;
color: #fff;
}
I changed your markup a bit as well to make it more semantic. Check out the example and let me know if that helped :)
I'm working on a site with a knotted rope-style bar that expands to show more information on hover, and I'm having issues getting the animation to look right. (Here's a staging link: http://couchcreative.co/tcc/).
Currently, the bar for the first step will move down to the bottom of the box before it animates upwards to its new position, while I want it to just move up to its new position on hover without starting at the bottom of the hover box. Can anyone help explain why this is happening? The relevant CSS starts with the ".look" class.
Apologies if I'm not explaining this right, but hopefully when you visit the site you'll see what I mean about the animation looking a bit… off. Thanks for the help!
I would rework your HTML structure to make it more semantic and less repetitious.
Demo: http://jsfiddle.net/krmn4/5/
HTML:
<a href="/testicularcancer/" class="look">
<figure><img src="http://couchcreative.co/tcc/img/look.png" /></figure>
<div class="bar"></div>
<div class="off">
<h4>Look</h4>
</div>
<div class="on">
<h4>Relax your scrotum.</h4>
<p>Check your testicles just after you’ve had a bath or shower, when the muscles in the scrotum are relaxed, making it easier for you to feel any lumps, growths or tenderness. Stand in front of the mirror. Look for any swelling on the skin of your scrotum.</p>
<span>Learn More</span>
</div>
</a>
CSS:
.look {
position: absolute;
bottom: 0;
left: 0;
width: 235px;
overflow: hidden;
/* optional styling */
color: #000;
text-align: center;
text-decoration: none;
}
.look h4 {
/* optional styling */
line-height: 48px;
font-size: 20px;
font-weight: bold;
}
.look .bar {
height: 48px;
background: url(http://couchcreative.co/tcc/img/step_1.png) 0 0 repeat-x;
margin: -24px 0 0; /* half of height */
/* necessary so figure img doesn't overlap */
position: relative;
z-index: 1;
}
.look figure,
.look .off,
.look .on {
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
transition: all 300ms linear;
height: 0;
opacity: 0;
overflow: hidden;
}
.look figure {
/* optional styling */
background-color: #b2d5e6;
padding: 12px;
margin: 0;
}
.look .off {
height: 48px;
opacity: 1;
}
/* hover state */
.look:hover .off {
height: 0;
opacity: 0;
}
.look:hover figure {
height: 120px; /* or however tall it needs to be */
opacity: 1;
}
.look:hover .on {
height: 220px; /* or however tall it needs to be */
opacity: 1;
}