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>
Related
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>
I created a pseudo element which transitions width to reveal a second pseudo element below of a different colour. It's working in all browsers except IE where the pseudo element becomes 100% of the page width when hovering off the element. What gives?
<span>Hello world</span>
<style>
span{
position: relative;
font-size: 64px;
}
span:before, span:after{
position: absolute;
content: "";
left: 0;
bottom: -3px;
width: 100%;
height: 5px;
transition: all 1s ease;
}
span:before{
background: green;
}
span:after{
background: red;
}
span:hover:after{
width: 0;
}
</style>
https://jsfiddle.net/mmbgLf51/
Can't say (yet) why that happens but here is a workaround, where I use the right property instead.
Update
Giving the span inline-block (or block) does as well solve it, which would mean that the inline element for some reason gets pushed by the pseudo content, and most likely qualifies as a bug ..
.. or normal IE behavior :)
Sample 1 (using right)
span{
position: relative;
font-size: 64px;
}
span:before, span:after{
position: absolute;
content: " ";
left: 0;
bottom: -3px;
right: 0;
height: 5px;
transition: all 1s ease;
}
span:before{
background: green;
}
span:after{
background: red;
}
span:hover:after{
right: 100%;
}
<span>Hello world</span>
Sample 2 (using display: inline-block)
span{
display: inline-block;
position: relative;
font-size: 64px;
}
span:before, span:after{
position: absolute;
content: "";
left: 0;
bottom: -3px;
width: 100%;
height: 5px;
transition: all 1s ease;
}
span:before{
background: green;
}
span:after{
background: red;
}
span:hover:after{
width: 0;
}
<span>Hello world</span>
I want to have a transistion on my menu list when hovered but I want to change the border-bottom to border-top.
How can I do this?
.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle-out:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
width: 100%;
background: blue;
}
<li class="scroll sliding-middle-out">Features</li>
You can use the :before pseudo element instead of the :after pseudo element so the line is displayed on top of (before) your link:
.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle-out:before {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:before {
width: 100%;
background: blue;
}
<li class="scroll sliding-middle-out">Features</li>
Note that the line isn't made with the border property but with the background of the pseudo element
I have a hoverable CSS-only tooltip that works well in most instances, but I want to add a scrollbar when it exceeds a max-height. If I add max-height: 50px; overflow-y: auto, my pseudo elements :before and :after will disappear due to the overflow property.
See: http://jsfiddle.net/accelerate/24xwru1n/
Is there a way to add a scrollbar to my tooltip while maintaining my pseudo elements? Or will I have to live without my pseudo elements to make it work?
I'm afraid you have to add a wrapper when you want a scroll in hover and apply to this the css as in tooltip-text:
HTML
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>
.wrapper{
position:relative;
}
.tooltip {
transform: none;
margin: 50px;
}
.tooltip:hover > .tooltip-text, .tooltip:hover > .wrapper {
pointer-events: auto;
opacity: 1.0;
}
.tooltip > .tooltip-text, .tooltip >.wrapper {
display: block;
position: absolute;
z-index: 6000;
overflow: visible;
padding: 5px 8px;
margin-top: 10px;
line-height: 16px;
border-radius: 4px;
text-align: left;
color: #fff;
background: #000;
pointer-events: none;
opacity: 0.0;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
/* Arrow */
.tooltip > .tooltip-text:before, .tooltip > .wrapper:before {
display: inline;
top: -5px;
content: "";
position: absolute;
border: solid;
border-color: rgba(0, 0, 0, 1) transparent;
border-width: 0 .5em .5em .5em;
z-index: 6000;
left: 20px;
}
/* Invisible area so you can hover over tooltip */
.tooltip > .tooltip-text:after, .tooltip > .wrapper:after {
top: -20px;
content: " ";
display: block;
height: 20px;
position: absolute;
width: 60px;
left: 20px;
}
.wrapper > .tooltip-text {
overflow-y: auto;
max-height: 40px;
display: block;
}
<div class="tooltip">Hover over me for no scrollbar<span class="tooltip-text">Hello there<p/>abc<br/>def<br/>ghi<br/>jkl<br/></span></div>
<p/><p/><p/>
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>
I'm using CSS3 transitions to make some fade in/out transitions on a link.
I've used the transition to make the background colour fade to nothing, but I'd like to make two "borders" fade in and also move down. The borders are not actually borders because I cannot use that to position it correctly, so I've used a psuedo element of a :before: with a 3px height to create a border effect.
My question is, is it possible to use CSS3 transitions (e.g fade in the colour or move the border down 3px)
li:hover:before{content: "";height: 3px;background-color: black;width: 100%;position: absolute;left: 0;top: -3px;}
li:hover:after{content: "";height: 3px;background-color: black;width: 100%;position: absolute;left: 0;bottom: -3px;}
http://jsfiddle.net/akxrv4zf/1/
You simply need to style the :after and :before psuedo-elements WITHOUT the :hover psuedo event.
You need styles like: li:before AND styles like: li:hover:before. Try something like below.
/* Menu link animations */
li {
transition: background-color 0.3s ease-in;
position: relative;
}
li:hover {
background-color: transparent;
}
li:before {
content: "";
height: 3px;
background-color: transparent;
width: 100%;
position: absolute;
left: 0;
top: -10px;
transition: background 0.5s, top 0.5s;
}
li:after {
content: "";
height: 3px;
background-color: transparent;
width: 100%;
position: absolute;
left: 0;
bottom: -10px;
transition: background 0.5s, bottom 0.5s;
}
li:hover:before {
content: "";
height: 3px;
background-color: black;
width: 100%;
position: absolute;
left: 0;
top: -3px;
}
li:hover:after {
content: "";
height: 3px;
background-color: black;
width: 100%;
position: absolute;
left: 0;
bottom: -3px;
}
/* General Link settings */
li {
cursor: pointer;
margin: 25px 2% 0 2%;
display: inline-block;
width: 15%;
text-align: center;
padding: 5px;
background-color: #E7DAC6;
<li>Example</li>
Yes, you can style :after and :before elements just like any other element, including transitions.
Checkout this jsFiddle.
You will have to make give content to the :after,:before elements, so you can animate from one state to another.
If they do not have content from the start they are treated as display:none and you cannot apply transitions to elements whose state starts from display:none
li:before, li:after {
content:"";
height: 3px;
background-color: transparent;
width: 100%;
position: absolute;
left: 0;
transition:all 0.3s ease-in;
}
li:before {top: 0px;}
li:after {bottom: 0px;}
li:hover:before {top: -3px;}
li:hover:after {bottom: -3px;}
li:hover:after, li:hover:before {
background-color:black;
}
Demo at http://jsfiddle.net/gaby/vmL8qt6k/1