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
Related
I m trying to make an expandable input field to push other div when its expanded. So far its only covering the div which it supposed to push. Any ideas how to achieve that with css ?
input[type="text"] {
border-radius: 0;
height: 24px;
line-height: 24px;
outline: none;
position: absolute;
right: 10rem;
top: 5rem;
-webkit-transition: width 15ms ease;
-moz-transition: width 15ms ease;
-o-transition: width 15ms ease;
-ms-transition: width 15ms ease;
transition: width 2s ease;
width: 10%;
}
input[type="text"]:focus {
width: 30%;
}
.div-to-pushed {
height: 28px;
width: 10%;
border: 1px solid black;
position: relative;
top: 72px;
left: 300px;
}
https://stackblitz.com/edit/angular-ph3dmv?embed=1&file=src/app/app.component.ts
The issue is your input element is position absolute which takes it out of document flow.
remove the position absolute and remove top and left positioning on both elements.
add justify-content: flex-end to the parent container;
Code Example:
.parent {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
div {
height: 28px;
width: 10%;
border: 1px solid black;
position: relative;
}
input {border-radius: 0;
height: 24px;
line-height: 24px;
outline: none;
transition: width 2s ease;
width: 10%;
}
I'm fighting with quite easy problem.
Sections change their max-height on hover.
the small span article article__tag should always position at the bottom of its parent (the green line) no matter how much the row will grow and share its easing animation and delay.
This is what I have:
section{
background: #000;
color: #fff;
display: flex;
max-height: 150px;
border-bottom: 1px solid lightgreen;
transition: max-height .5s ease-in-out;
position: relative;
overflow: hidden;
}
section:hover {
max-height: 400px;
transition-delay: .3s;
}
article {
flex:1;
height: 200px
}
.article__tag {
background: white;
color: #000;
position: absolute;
padding: 10px;
top: 120px;
transition: all .5s ease-in-out;
transition-delay: .3s;
}
section:hover .article__tag {
bottom: 0;
top: inherit;
}
<section>
<article>A</article>
<article><span class="article__tag">tag</span></article>
</section>
<section>
<article>B</article>
<article><span class="article__tag">tag</span></article>
</section>
https://codepen.io/t-book/pen/LYpjVPz
My problem is, on mouse leave the white label jumps up quickly. Further, I've defined it's top with 165px a value which I cannot foresee as the rows have different content.
How can I position the label always on current max-height bottom?
Keep article_tag at bottom always:
section{
background: #000;
color: #fff;
display: flex;
max-height: 150px;
border-bottom: 1px solid lightgreen;
transition: max-height .5s ease-in-out;
position: relative;
overflow: hidden;
}
section:hover {
max-height: 400px;
transition-delay: .3s;
}
article {
flex:1;
height: 200px
}
.article__tag {
background: white;
color: #000;
position: absolute;
padding: 10px;
bottom: 0px;
transition: all .5s ease-in-out;
transition-delay: .3s;
}
<section>
<article>A</article>
<article><span class="article__tag">tag</span></article>
</section>
<section>
<article>B</article>
<article><span class="article__tag">tag</span></article>
</section>
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>
How to create transition effect like:
http://jsfiddle.net/mfn5nefb/6/
but for text input?
I tried replace h1 with input but it does not work.
You have to change the HTML structure to do the same with input because you can't use pseudo elements like :after on an input element (which is an auto closing element)
HTML
<div id="input">
<input type="text" value="CSS IS AWESOME" /><span></span>
</div>
CSS
#input {
color: #666;
position: relative;
display: inline-block;
}
span {
position: absolute;
left: 50%;
content: '';
height: 40px;
height: 5px;
background: #f00;
transition: all 0.5s linear;
width: 0;
bottom: -5px;
}
input:hover ~ span {
width: 200px;
margin-left: -105px;
}
See this fiddle
.input_container{
display: inline-block;
text-align: center;
}
.awsome_input{
padding: 5px 10px;
border: none;
background: transparent;
display: block;
}
.awsome_input_border{
display:inline-block;
width:0px;
height: 2px;
background: #FEC938;
position: relative;
top:-5px;
-webkit-transition: all ease-in-out .15s;
-o-transition: all ease-in-out .15s;
transition: all ease-in-out .15s;
}
.awsome_input:hover,
.awsome_input:active,
.awsome_input:focus{
outline: none;
}
.awsome_input:hover+.awsome_input_border,
.awsome_input:active+.awsome_input_border,
.awsome_input:focus+.awsome_input_border{
width:100%;
}
<div class="input_container">
<input type="text" class="awsome_input"
placeholder="What do you think?"/>
<span class="awsome_input_border"/>
</div>
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>