I want to create a border animation. If i hover over the link, the border-bottom should extend from the left side to the right side. I searched alot,
but i dont know how to name it.
Here is my Code:
.a{
width: 200px;
display: inline-block;
transition: 0.5s all;
}
.a:hover{
border-bottom: 5px solid #037CA9;
}
<a>Benutzername:</a>
How must i design this elemt, that a border-bottom extend from the left to the right side?
You could use a positioned pseudo-element
a {
text-decoration: none;
position: relative;
}
a::before {
content: '';
position: absolute;
background: red;
height: 2px;
top: 100%;
left: 0;
width: 0%;
transition: width 0.5s ease;
}
a:hover::before {
width: 100%;
}
Benutzername:
You can use a pseudo element scaled to 0.001 and scale it back to 1 on hover. This approach is dercibed in an other question: Expand border from center on hover
To make it expand form the left, you just need to change the transform origin to 0 0 :
a{
display:inline-block;
}
a:after {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform-origin:0 0;
transform: scaleX(0.001);
transition: transform 250ms ease-in-out;
}
a:hover:after {
transform: scaleX(1);
}
<a>Benutzername:</a>
I think that you're trying to get something like this fiddle below.
I made a little example with an styled <a> tag and used the pseudo <a> element and gave it a transition to make it extend when you hover it.
a {
position:relative;
display:inline-block;
padding:5px 10px;
color:#444;
background:#f3f3f3;
text-decoration:none;
}
a:after {
content:'';
position:absolute;
background:green;
display:block;
height:2px;
bottom:-2px;
left:0;
min-width:0;
transition:all .2s linear;
-webkit-transition:all .2s linear;
}
a:hover:after {
min-width:100%;
}
Hover button
maybe add some more browser specific css transitions to be more multi browser compatible. For more info on that take a look HERE
jsFIDDLE
If someone wants to extend the line from center there is solution:
a {
position: relative;
text-decoration: none;
}
a:after {
content: '';
background: #2a57b3;
display: block;
height: 2px;
position: absolute;
left: 50%;
bottom: 0;
width: 0;
-webkit-transition: all .2s;
transition: all .2s;
}
a:hover:after {
width: 100%;
margin-left: -50%;
}
<a>Hover me!</a>
You could try this.
#divname {
position:absolute;
top:0;
height:500px;
}
#divname:hover {
position:absolute;
top:0;
height:600px;
}
This worked for me.
Related
I am trying to use simple transiton, but I don't understand why it is not working. Could you help me? I put transition: ease-in-out; in container...
my code:
.container{
width:250px;
height:300px;
background:#00f;
position:relative;
transition: ease-in-out;
}
.show{
display: none;
position:absolute;
bottom:0;
height:50%;
width:100%;
color:#000;
text-indent:5px;
background:rgba(255,255,255,.5);
}
.container:hover > .show{
display:block;
}
http://jsfiddle.net/mAzsL/44/
I use this as example: http://jsfiddle.net/n7Ne9/53/
UPDATE:
My aim was to get effect which is called 'fade in a box' - I wasn't precise, sorry.
Update:
On new requirements, the transition effect needs to be different, please refer the below snippet.
.container {
width: 250px;
height: 300px;
background: #00f;
position: relative;
}
.show {
position: absolute;
opacity:0;
height:30%;
bottom:0px;
left:0px;
right:0px;
color: #000;
text-indent: 5px;
background: rgba(255, 255, 255, .5);
transition: opacity 0.5s ease-in-out;
}
.container:hover>.show {
opacity:1;
}
<div class="container">
<div class="show">Lorem </div>
</div>
Old Answer:
The problem is transition property cannot be applied to the CSS property display:none, the workaround for this is to set the height to 0px initially, a problem you will face is that the text will still be visible on the screen. For this overflowing text to be hidden, use the CSS class overflow:hidden which will hide the content which is outside the element. Also instead of using transition on the parent element, use it directly on the element itself. Refer the below class.
.show{
position:absolute;
overflow:hidden;
bottom:0;
height:0px;
width:100%;
color:#000;
text-indent:5px;
background:rgba(255,255,255,.5);
transition: height 1s ease-in-out;
}
The transition property should be as follows.
transition: height 1s ease-in-out;
First mention which property should have the transition effect. Then duration of the transition, then whether ease-in or some other setting.
Then on hover, set the original height. The transition will be seen.
.container:hover > .show{
height:50%;
}
.container {
width: 250px;
height: 300px;
background: #00f;
position: relative;
}
.show {
position: absolute;
overflow: hidden;
bottom: 0;
height: 0px;
width: 100%;
color: #000;
text-indent: 5px;
background: rgba(255, 255, 255, .5);
transition: height 1s ease-in-out;
}
.container:hover>.show {
height: 50%;
}
<div class="container">
<div class="show">Lorem </div>
</div>
I tried to create a button whose ::after gets scaled when clicked. I tried and tried but couldn't. I think this effect is possible via CSS only. So please help.
Please help me to create this button as of gif:
Like:
#button::after:active{
transform: scale(2);
}
or something like that!
You can use :before pseudo-element to create another rectangle under button and use transform to scale it on click. Instead of css :active state you can use click event. After you click on element you need to click on some other element to remove active state and see effect again on click.
button {
padding: 10px 25px;
background: red;
color: white;
margin: 50px;
border: none;
position: relative;
outline: none;
}
button:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: black;
z-index: -1;
}
button:focus:before {
transform: scale(2);
transition: all 0.4s linear;
opacity: 0;
}
<button>Click</button>
Try this
HTML
<button class="scale-btn">Text</button>
CSS
.scale-btn{
padding:6px 12px;
border:none;
background-color: #212121;
color:#fff;
font-size:20px;
position: relative;
opacity: 1;
}
.scale-btn::after{
content:"";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
transform:scale(1);
background-color: rgba(0,0,0,0.8);
opacity:1;
transition:all ease 0.5s;
z-index:-1;
}
.scale-btn:hover::after{
animation:grow 0.5s ease;
}
#keyframes grow
{
0%{
transform:scale(1);
opacity:1;
}
100%{
transform:scale(1.2);
opacity:0;
}
}
Style accordingly
Link for reference
Why do you need it with :after?
.button {
margin: 2em;
}
.button:hover {
transform: scale(2);
}
<button class="button">Button</button>
this question is a follow on from my previous question.
I have some style used from this website, to create a slide in underline effect, please see example on this jsfiddle.
My previous question was asking how to adapt this so the line came in from right to left, and on top of the text, please see example on this jsfiddle.
My next step is to add both of these to one element, so one line slides in from left to right on the bottom, and the other right to left on top.
When I tried to add both of these together, it seems to only display the top one, please see this jsfiddle.
My question is how do I add both the top slide in line and the bottom slide in line to an element?
.cmn-t-underline {
position: relative;
color: #ff3296;
}
.cmn-t-underline:after {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #2E9AFE;
content: "";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
.cmn-t-underline:hover {
color: #98004a;
}
.cmn-t-underline:hover:after {
width: 100%;
height:2px;
}
.cmn-t-overline {
position: relative;
color: #ff3296;
}
.cmn-t-overline:after {
display: block;
position: absolute;
right: 0;
top: -10px;
width: 0;
height: 10px;
background-color: #2E9AFE;
content: "";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
.cmn-t-overline:hover {
color: #98004a;
}
.cmn-t-overline:hover:after {
width: 100%;
height:2px;
}
<h1 class="cmn-t-underline cmn-t-overline">Test</h1>
You have to make use of :before for your top line, and :after for your bottom line.
The way you are doing it the second ":after" overrides the first so you end up with only one line.
I have edited your jsFiddle :
http://jsfiddle.net/7k4rLdno/
I only changed the second :after with :before and everything works well.
You can't have two :after or two :before the the exact same element.
use
:before - top line
:after - bottom line
h1{
position: relative;
color: #ff3296;
}
h1:before,
h1:after {
display: block;
position: absolute;
width: 0;
height: 10px;
background-color: #2E9AFE;
content:"";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
h1:before {
left: 0;
top: -10px;
}
h1:after {
right: 0;
bottom: -10px;
}
h1:hover {
color: #98004a;
}
h1:hover:after,
h1:hover:before {
width: 100%;
height:2px;
}
<h1>Test</h1>
Fiddle
I've created a simple hamburger menu that transforms into a plus sign when the user hovers over it but there's an annoying flicker that occurs on hover. Is it possible to increase the hover region around the entire hamburger in CSS3 so that the flicker doesn't occur?
Here's the codepen link:
http://cdpn.io/LJHpe
As you likely know the flickering is due to the elements starting and stopping being hovered. There are several ways to fix this, the path I chose to do so is to make it one element instead of two (:
<span class="menu">MENU</span>
body {
background:#EDDE45;
position:relative;
margin-left:50%;
top:50px;
}
.menu {
position:relative;
top:50px;
padding-top:3em;
font-family: arial,verdana;
font-size:18px;
color:black;
cursor:default;
}
.menu:before { /* The top two lines */
content:'';
position: absolute;
left: -1em;
top: 0;
width: 5em;
height: .5em;
border-top:0.5em solid black;
border-bottom:0.5em solid black;
transition:transform 0.25s ease-in, border-bottom .2s;
}
.menu:after { /* The third line */
content:'';
position: absolute;
left:-1em;
top:2em;
width:5em;
height:0.5em;
background:black;
transition:all 0.25s ease-in;
}
.menu:hover {
cursor:pointer;
}
.menu:hover:before {
transform:scale(0.8);
border-bottom:0.5em solid rgba(255,255,255,0);
}
.menu:hover:after {
transform:scale(0.8) rotate(90deg);
top:0em;
}
Demo
Let me know if you have any questions!
Is it possible to add an opacity transition to CSS3 div overlay target?
JSFIDDLE: http://jsfiddle.net/pb7St/
#content {
background-color: #ccc;
height: 300px;
width: 300px;
z-index:1;
}
.overlaystyle {
height: 100px;
width: 100px;
background-color: #000;
left: 20px;
top: 20px;
position: absolute;
z-index:2;
opacity: 0;
-webkit-transition: opacity 1s ease;
}
#overlay {
display:none;
}
#overlay:target {
display:block;
opacity: 1;
}
Is there any other (better) way to close / hide the div? Currently I'm using:
href="#_"
Yes, there is:
JSFiddle Demo
CSS
.overlaystyle {
height: 100px;
width: 100px;
background-color: #000;
left: 20px;
top: 20px;
position: absolute;
z-index:2;
opacity: 0;
-webkit-transition: opacity 1s ease, visibility 1s 0s; /* added visibility transition */
}
#overlay {
//display:none;
visibility:hidden
}
#overlay:target {
//display:block;
visibility:visible;
opacity: 1;
}
EDITED to add transition to visibility with delay for fade-out effect. Personally, I'd go with JQuery. :)