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>
Related
Once I go on the element which holds screen-transition class,
the following code just turns the background color from transparent
to green through hover:
.screen-transition{
position: relative;
display: block !important;
background-color: transparent;
z-index: 1;
}
.screen-transition::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: green;
z-index: -1;
transition: 1s;
opacity: 0;
}
.screen-transition:hover::before {
opacity: 1;
}
and now I just want to replace hover with sth else so that background color turns to green when the page is loaded
any workaround please?
Try setting the body of the page in the css file?
body {
background-color: green;
}
js code
document.body.onload=function ()
{
setTimeout(function()
{document.body.classList.add('animation_class')},1000);
}
CSS code
. animatin_class
{
background-color:green ! important;
}
body
{
background-color:red;
transition:all .4s;
}
If you want this fadeIn to happen on page Load, simply define a keyframe and add the animation to before class. Let me know if this works
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.screen-transition{
position: relative;
display: block !important;
background-color: transparent;
z-index: 1;
width: 100vw;
height: 100px;
}
.screen-transition::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: green;
z-index: -1;
transition: 1s;
animation: fadeIn 2s;
}
I would like to animate two borders on hover specifically border-left and border-top. After doing some research it does not seem you can actually "animate" the borders themselves so you have to create a "line" which on hover should have its width set to 100% to have the same effect.
I know how to do this with underlining menu items, but I would like to do it with this box I'm trying to create.
Specifically on hover (while maintaining the css effects already written up)
1) border-left should extend to the top and right after that-> 2) border-top extending from the left to the right.
Also was wondering how I can choose which borders to extend if I don't want to to just do border-left or border-top.
This is my box thus far (unfortunately nothing with animating borders):
CSS:
#txt{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
font-size:2vw;
}
#box{
position:fixed;
top:25%;
left:25%;
height:20vw;
width:20vw;
border-right: 2px solid deepskyblue;
border-bottom: 2px solid deepskyblue;
background-color:black;
color:ghostwhite;
}
#box:hover{
color:deepskyblue;
transition: color 0.25s ease;
}
#box:after{
content:"";
position:absolute;
bottom: 0;
left: 0;
width:100%;
height:100%;
transform: scale(0, 0);
transform-origin:bottom right;
background: ghostwhite;
z-index: -1;
transition: transform 0.25s ease;
}
#box:hover::after{
transform: scale(1, 1);
color:deepskyblue;
}
HTML:
<div id="box">
<span id="txt">TEXT</span>
</div>
You can make the #txt element as large as the parent box and then use pseudo-element on that to make "borders" and animate the dimensions of those pseudo-elements.
If you add a transiton-delay in I think you can get the effect you are after.
#txt {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
#box {
font-size: 2vw;
position: fixed;
top: 1em;
left: 40vw;
height: 20vw;
width: 20vw;
background-color: black;
color: ghostwhite;
}
#box:hover {
color: deepskyblue;
transition: color 0.25s ease;
}
#box:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(0, 0);
transform-origin: bottom right;
background: ghostwhite;
z-index: -1;
transition: transform 0.25s ease;
}
#box:hover::after {
transform: scale(1, 1);
color: deepskyblue;
}
#txt::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
bottom: 0;
height: 0;
}
#txt::before {
width: 0;
border-left: 2px solid deepskyblue;
transition: height .25s .5s ease;
}
#txt:hover::before {
height: 100%;
}
#txt::after {
content: "";
position: absolute;
width: 0%;
top: 0;
left: 0;
border-top: 2px solid deepskyblue;
transition: width 0.25s .75s ease;
}
#txt:hover::after {
width: 100%;
}
<div id="box">
<span id="txt">TEXT</span>
</div>
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.
I made this rollover:
jsfiddle.net/DH6Lu/
But as you can see the background image glitches. This is not the case when I don't use the opacity on the main div:
http://jsfiddle.net/6KT9p/
Any idea what is wrong?
<div id="opacity">
<div class="box">
<a class="link" href="#">
<div class="inner">
<img src="http://lorempixel.com/340/192/" width="340" height="192">
<div class="description">
<h3>titel2</h3>
</div>
</div>
</a>
</div>
</div>
.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.inner {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.inner img {
position: absolute;
opacity: 1;
-webkit-transition: opacity 0.5s ease;
}
.inner img:hover {
opacity: 0.15
}
.description {
background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0 fixed;
width: 340px;
height: 192px;
position: absolute;
z-index: -1;
}
.description h3 {
color: #fff;
font-size: 18px;
text-transform: uppercase;
text-align: center;
position: absolute;
}
#opacity {
opacity: 0.5
}
The problem arises from the fixed property of the background.
Set the CSS to
.description {
background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0;
width: 340px;
height: 192px;
position: absolute;
z-index: -1;
}
and it will work
fiddle
The problem is also linked to the GPU handling this different from the CPU. The GPU is handling the background during the transtion, the CPU in the static states. If you set transform: translateZ(1px) - one of the usual tricks to enable GPU - the background will be permanently in an offset. It solves the glitch, but the look isn't correct.
I guess it glitches because .inner inherits the opacity from #opacity... but I don't know why. Interesting.
Still, I have a workaround for your case, if you want to keep the initial alpha to 0.5: make the .inner half visible, hide the .description unless it's hovered.
The adjacent sibling selector + is useful to show the description when the image is hovered.
Here's what you have to add (existent properties omitted):
.inner img {
-webkit-transition: opacity 0.5s ease;
opacity:0.5;
}
.inner img:hover{
opacity:0.15;
}
.inner img:hover + .description{
opacity:1;
}
.description {
-webkit-transition: opacity 0.5s ease;
opacity:0;
}
Here's a working demo for this.
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. :)