I found a code to animate the underline of a link but I would like to be on the other direction, as we read (left to right) which is actually the opposite. Here is a JSFiddle
.sliding-u-l-r-l-inverse {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-u-l-r-l-inverse:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
transition: width 0s ease;
}
.sliding-u-l-r-l-inverse:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 100%;
background: blue;
transition: width .8s ease;
}
.sliding-u-l-r-l-inverse:hover:before {
width: 0%;
background: blue;
transition: width .8s ease;
}
.sliding-u-l-r-l-inverse:hover:after {
width: 0%;
background: transparent;
transition: width 0s ease;
}
<div class="sliding-u-l-r-l-inverse">
I want it to slide on the other direction.
</div>
Change the value declaration of left and right.
i.e. .sliding-u-l-r-l-inverse:before consist of left:0 change that to right:0 and same in other pseudo selector :after right:0 to left:0. This changes the direction and makes line to start from left to right.
.sliding-u-l-r-l-inverse {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-u-l-r-l-inverse:before {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 100%;
transition: width 0s ease;
}
.sliding-u-l-r-l-inverse:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: blue;
transition: width .8s ease;
}
.sliding-u-l-r-l-inverse:hover:before {
width: 0%;
background: blue;
transition: width .8s ease;
}
.sliding-u-l-r-l-inverse:hover:after {
width: 0%;
background: transparent;
transition: width 0s ease;
}
<div class="sliding-u-l-r-l-inverse">
I want it to slide on the other direction.
</div>
.sliding-u-l-r-l-inverse {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-u-l-r-l-inverse:before {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 100%;
transition: width 0s ease;
}
.sliding-u-l-r-l-inverse:after {
content: '';
display: block;
position: absolute;
left: 0; /* changed from 'right' */
bottom: 0;
height: 3px;
width: 100%;
background: blue;
transition: width .8s ease;
}
.sliding-u-l-r-l-inverse:hover:before {
width: 0%;
background: blue;
transition: width .8s ease;
}
.sliding-u-l-r-l-inverse:hover:after {
width: 0%;
background: transparent;
transition: width 0s ease;
}
<div class="sliding-u-l-r-l-inverse">
I want it to slide on the other direction.
</div>
Related
When hover before effect background does not see. But after effect background work. I try a different ways. I also use z-index but it also does not work.
.img-hover {
position: relative;
overflow: hidden;
}
.img-hover img {
transition: 0.4s ease-in-out;
cursor: pointer;
}
.img-hover::after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(17, 17, 17, 0.294);
content: "";
transition: all ease-in-out 0.7s;
cursor: pointer;
}
.img-hover:hover::after {
top: 0;
left: 0;
width: 0;
height: 0;
}
.img-hover::before {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(17, 17, 17, 0.294);
content: "";
transition: all ease-in-out 0.7s;
}
.img-hover:hover::before {
bottom: 0;
right: 0;
width: 0;
height: 0;
}
But the code does not work. I try to find out but
I have substituted img with no src but width and height and background pink and also slowed the transitions to 7s on the before and after pseudo elements.
You will see that the before is working as well as the after - the before shrinks the covering down to the right bottom and the after shrinks it down to the top left.
i.e. I cannot see what is not working in regard to the pseudo elements.
However, note that there is a transition specified for the actual img element but nothing is changed on the actual img on a hover so there is nothing happening to the actual img, only to the overlaid pseudo elements.
<style>
.img-hover {
position: relative;
overflow: hidden;
display: inline-block;
}
.img-hover img {
transition: 0.4wis ease-in-out;
cursor: pointer;
width: 100px;
height: 100px;
background: pink;
}
.img-hover::after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(17, 17, 17, 0.294);
content: "";
transition: all ease-in-out 7s;
cursor: pointer;
}
.img-hover:hover::after {
top: 0;
left: 0;
width: 0;
height: 0;
}
.img-hover::before {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(17, 17, 17, 0.294);
content: "";
transition: all ease-in-out 7s;
}
.img-hover:hover::before {
bottom: 0;
right: 0;
width: 0;
height: 0;
}
</style>
<div class="img-hover">
<img src="">
</div>
I'm trying to create a hover effect, but the text isn't showing above the :before class.
Here is a codepen of the project https://codepen.io/designextras/pen/WNrJdbR
I'm not sure what edit's I would need to make to show the text above since the button text I can't add a z-index
Here is the css
.btn-2 {
width: 300px;
height: 100px;
border: none;
color: black;
border-radius: 4px;
transition: 0.3s ease all;
font-size: 2rem;
letter-spacing: 4px;
border: 3px solid #FF0072;
border-radius: 4px;
position: relative;
}
.btn-2:hover {
color: #000;
}
.btn-2:before {
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: "";
background-color: #FF0072;
z-index: 1;
}
.btn-2:hover:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
Here is the html
<button class="btn-2">HOVER</button>
Try to add this css code:
.btn-2 {
z-index: 1;
}
.btn-2:hover:before {
z-index: -1;
}
html
<button class="btn-2"><span>HOVER</span></button>
css
.btn-2 {
width: 300px;
height: 100px;
border: none;
color: black;
border-radius: 4px;
transition: 0.3s ease all;
font-size: 2rem;
letter-spacing: 4px;
border: 3px solid #FF0072;
border-radius: 4px;
position: relative;
}
.btn-2:hover {
color: #000;
}
.btn-2:before {
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: "";
background-color: #FF0072;
z-index: 1;
}
.btn-2:hover:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.btn-2 span {
color: orange;
z-index: 3;
position: relative;
}
.btn-2:hover span {
color: #000;
}
eg:
ref: https://codepen.io/nani554/pen/jOWxYmG
I want to add a background under a button when hovering over it. I would like to make use of the :after pseudo selector in order to avoid including more markup.
button {
position: relative;
z-index: 1;
padding: 1rem 2rem;
background: blue;
color: white;
border: none;
transition: 0.25s ease all;
}
button:after {
opacity: 0;
content: "";
z-index: -1;
position: absolute;
top: 5%;
left: 5%;
width: 100%;
height: 100%;
background: red;
transition: 0.25s ease opacity;
}
button:hover:after {
opacity: 1;
}
<button>Hello world</button>
As you can see when hovering the red background is placed on top of the button's background which is not what I want.
Any ideas on how could I achieve this effect?
Here is a demo: https://codepen.io/cesalberca/pen/EEVMVx
Just remove the z-index from the button:
button {
position: relative;
padding: 1rem 2rem;
background: blue;
color: white;
border: none;
transition: 0.25s ease all;
}
button:after {
opacity: 0;
content: "";
z-index: -1;
position: absolute;
top: 5%;
left: 5%;
width: 100%;
height: 100%;
background: red;
transition: 0.25s ease opacity;
}
button:hover:after {
opacity: 1;
}
<button>Hello world</button>
Edit per comments (you need a span in the button):
button {
position: relative;
z-index: 1;
border: none;
background: transparent;
padding: 0;
}
button span {
display: inline-block;
padding: 1rem 2rem;
background: blue;
color: white;
transition: 0.25s ease all;
position: relative;
z-index: 2;
}
button:after {
opacity: 0;
content: "";
z-index: 1;
position: absolute;
top: 5%;
left: 5%;
width: 100%;
height: 100%;
background: red;
transition: 0.25s ease opacity;
}
button:hover:after {
opacity: 1;
}
<button><span>Hello world</span></button>
No extra element needed.
button {
border: 0;
outline: 0;
background: none;
position: relative;
display: inline-block;
padding: 1rem 2rem;
background: blue;
color: white;
transition: all .25s ease;
cursor: pointer;
}
button:after {
content: "";
opacity: 0;
position: absolute;
top: 5%;
left: 5%;
width: 100%;
height: 100%;
background: red;
z-index: -1;
transition: opacity .3s ease;
}
button:hover:after {
opacity: 1;
}
<button>Submit</button>
Can any one tell me how to do a border-bottom hover effect from bottom to top?
Src: http://www.sony.com/electronics/playstation
Here is a simple sample using the pseudo element ::after
The advantage using this in favor of the border-bottom, it will not move the element up and down
a {
position: relative;
padding: 10px 20px;
}
a::after {
content: ' ';
position: absolute;
left: 0;
bottom: -5px;
width: 100%;
height: 0;
background: blue;
transition: height 0.3s;
}
a:hover::after {
height: 5px;
transition: height 0.3s;
}
a + a::after {
content: ' ';
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 5px;
background: blue;
transition: width 0.3s;
}
a + a:hover::after {
width: 100%;
transition: width 0.3s;
}
<a> Hover me </a> <a> Hover me 2 </a>
I am trying to fill a wrapper (600x600px) when hovering over smaller boxes inside it. For a box in the top left corner, it is easily done using regular transition-timing-function, but when trying to enlarge in other directions, I have gotten stuck.
So I have the following:
#allbox {
background: #bbb;
width: 600px;
height: 600px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0
}
with boxes:
div.box1 {
position: absolute;
top: 0%;
left: 0%;
}
div.box2 {
position: absolute;
top: 0%;
left: 37.5%;
}
For transition I use:
#div1 {-webkit-transition-timing-function: linear;}
#div1 {transition-timing-function: linear;}
div.box1:hover {
width: 600px;
height: 600px;
}
But I am unable to figure a good way to do it for the following box.
Here is a sample using z-index keeping the hovered on top.
#allbox {
background: #bbb;
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0
}
#allbox div {
position: absolute;
z-index: 1;
top: 0%;
width: 33.33%;
height: 50%;
transition: left 0.5s linear, width 0.5s linear, height 0.5s linear, z-index 1s linear;
}
div.box1 {
left: 0;
background: blue;
}
div.box2 {
left: 33.33%;
background: red;
}
div.box3 {
left: 66.66%;
background: green;
}
#allbox div:hover {
z-index: 2;
left: 0;
width: 100%;
height: 100%;
transition: left 0.5s linear, width 0.5s linear, height 0.5s linear, z-index 0s linear;
}
<div id="allbox">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
I think we just add "left: 0;" to the hover state.
div.box2:hover {
left: 0;
width: 600px;
height: 600px;
}
Hope this help you.