Make border-bottom disappear on hover.
<a id="toggle" href="#modal0">living in New York,</a>
#toggle {
transition: all .3s ease-out;
position: relative;
}
#toggle::after{
content:'';
position:absolute;
width: 100%;
height: 0;
left:0;
bottom: 4px; /* <- distance */
border-bottom: 2px solid #000;
}
#toggle::after:hover{
transition: all .3s ease-out;
border-bottom: solid transparent 1px
}
Changed pseudo hover as suggested
#toggle:hover::after{
border-bottom: 1px transparent #999;
transition: all .3s ease-out;
}
You need to add position:relative to #toggle. This will make the positioning of the ::after pseudo-element relative to the element's position.
Edit
Per the update, you need to switch the ::after and the :hover, so #toggle:hover::after. That way it's "the after pseudo-element, of the #toggle when hovered".
You could set the display property of your a-element to inline-block and set the height property to something like 0.9em to move the bottom border closer, eg.
<a id="toggle" href="#modal0" style="display:inline-block;height:0.9em;">living in New York,</a>
Related
I'm currently making a contact page in Reactjs. I've added a focus effect and transition to the textarea. The problem is that when I'm resizing the textarea, the transition is also applied to that too, which I don't want.
I've put the transition in textarea:focus, but the transition doesn't apply when I unfocus on it.
Relevent Code
ContactPage.css
.container input, .container textarea {
background-color: #00000009;
border: none;
border-bottom: 2px solid #e0e0e0;
outline: none;
resize: vertical;
padding: 0px; /* Makes padding even on both sides. */
transition: 0.25s ease-in-out;
width: 100%;
}
.container input:focus {
border-bottom: 2px solid red;
}
.container textarea:focus {
border-bottom: 2px solid red;
}
You can specify in the the transistion what properties should be affected.
.container input, .container textarea {
background-color: #00000009;
border: none;
border-bottom: 2px solid #e0e0e0;
outline: none;
resize: vertical;
padding: 0px;
transition: border-bottom 0.25s ease-in-out; /* By adding border-bottom here, that will be the only property that will change. */
width: 100%;
}
You will need to stop using transition: all and apply transitions to each item manually. Here's a link to all the properties that transition: all would be applying to: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
The other answer mentions border-bottom which works in this specific case, but depending on your text area's styling you'll have to add more transitions. This is what I had to do for my text area which had some dynamic colour/background changes:
transition: border 100ms ease-in, background-color 100ms ease-in,
box-shadow 100ms ease-in;
So I have the following situation for a button I am making:
<i class="fas fa-angle-left"></i> Previous
which can be seen fully on https://jsfiddle.net/pre3xzL5/ (<i>-tag from Font Awesome).
Basically I want the text inside the button to be centered from the beginning (it isn't now), and then when I hover the arrow (<i>-tag) appears and comes from the middle to the left, and then the next should also go from the middle (centered as it should be) at moved a bit to the right. However, now, the next is starting at the place where it should be when hovered. It makes sense since the <i>-tag is taking up space, but that's the question: Can I correct this ?
I have done it using margins instead. But I've read that using margins for transitions and such is bad practice, and not good for performance - hence the try with translate.
These two transition statements are the only ones you need, set initially on the relevant elements. The position absolute changed to position relative on hover gets you the effect you want.
.button
{
transition: all 0.15s ease-in-out;
i
{
position:absolute;
transition: all 0.15s ease-in-out;
}
}
.button:hover
{
i
{
position:relative;
}
}
html:
<i class="fas fa-angle-left"></i> Previous
scss:
.button {
background: red;
padding: 20px 20px;
color: white;
text-transform: uppercase;
border-radius: 50px;
cursor: pointer;
position: relative;
justify-self: center;
display: inline-block;
width: 140px;
text-decoration: none;
text-align: center;
transition: all 0.15s ease-in-out;
border: 1px red solid;
i {
position:absolute;
opacity: 0.0;
transition: all 0.15s ease-in-out;
transform: translateX(.5em);
}
}
.button:hover {
background: red;
border: 1px black solid;
i {
position:relative;
transform: translateX(0px);
opacity: 1.0;
}
}
https://jsfiddle.net/pre3xzL5/1/
I would quite like to have captions that fade in at the bottom of the image. Whilst debugging I have found that div.desc is where it should be, as in, where it should appear, but no transition so to speak.
It could well be that the syntax for the way a div.item should hover is not correct.
Can someone help guide what I am doing wrong.
CSS:
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
position: absolute;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
bottom: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
a:hover .item {
opacity: 1;
left: 0;
z-index: 500;
}
With my HTML:
<div class="responsive">
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="/images/demo.jpg" alt="Find" width="535" height="535">
</a>
<div class="desc"><div class="item">This is the caption</div></div>
</div>
</div>
It looks like you're trying to transition the opacity on .desc, no?
If so, the reason it doesn't work is because you've selected the wrong element in your :hover code. You'll want to write this instead of what you have:
a:hover + .desc
The reason is that neither .item nor .desc is a child of your anchor tag. .desc is an adjacent sinling of it, and using + in CSS selects them. Also, you want to transition the elements that have properties to transition between (in this case, only .desc has its opacity changed initially).
How do I remove this ugly border created by a background totally overlapped by a inset shadow? Well, that was the idea anyway.
circle {
display:block;
text-decoration:none;
border-radius:50%;
width:100px;
height: 100px;
background: black;
text-align:center;
transition: all 0.8s ease-out;
box-shadow:inset 0px 0px 0px 50px #ffd300;
font-size: 0;
z-index: -1;
border: 10px solid #ffd300;
}
.circle:hover {
box-shadow:inset 0px 0px 0px 0px #ffd300;
transition: all 0.2s ease-out;
}
Code snippet over at Codepen
There is no solution to the actual rendering. (See below the solution for the explanation).
On the contrary, I've played and found a fix for you, which might do the exact thing, by placing an :after pseudo element to mimic the animation exactly as you want it to be.
Click on the "Run code snippet" button below to see if this is exactly what you want.
.circle {
display:block;
text-decoration:none;
border-radius:50%;
width:120px;
height: 120px;
background: #ffd300;
text-align:center;
transition: all 0.8s ease-out;
font-size: 0;
z-index: -1;
}
.circle:before {
display:block;
content:'';
position:absolute;
background:black;
width:0px;
height:0px;
border-radius:50%;
top:68px;
left:68px;
transition: all 0.2s ease-out;
overflow:hidden;
z-index: 0;
}
.circle:hover:before {
width:100px;
height:100px;
top:18px;
left:18px;
font-size: 48px;
}
.circle:after {
display:block;
position:absolute;
font-size: 48px;
line-height: 90px;
color: black;
transition: color 0.2s ease-out;
content: "J";
z-index: 1;
top:18px;
left:58px;
}
.circle:hover:after {
color: white;
transition: color 0.1s ease-out;
}
<a class="circle" href="#">Click</a>
Explanation to the problem
I've pasted two images of how they are rendered in Webkit (Chrome) and Gecko (Firefox). The shadow is getting pixelated along the edges if it is curved. The same phenomena also happens while drawing a curve.
Image 1, ChromeIt is a 500px x 500px of the same code that you used, just to magnify the effect that we are talking about. You can see those weird ugly border in a better view. Now, try reducing border-radius:50%; to a 20%, 10% or 0%, you will slowly see those ugly marks disappearing. As pixels are square themselves, it renders perfectly in case of a rectangular shape / with straight line edges.
Image 2, FirefoxIn the second image, you can see how Firefox renders the same object (500px x 500px), and adds a secondary unknown border along the outside edge of the circle, which is actually the background:black, going out of the 10px border as well (proof: Change the background to #ffd300 and it will disappear).
To conclude, this aliasing phenomenon is a rendering issue currently for both the major browser engines, though its minimized in actual rendering of the circular object itself, but its more prominent in case of shadows or other things which blurs / blends with other colors. It is not a problem with your code though.
The shape has a background color of black, a 10px outside border of yellow, and a 50px inside border of yellow. This seems to be so that when you hover, it will change the inside of the circle to red.
To get rid of the little sliver completely, you could just change .circle's background to #ffd300 (or whatever).
This breaks the animation, however, so you might want to add background:black to .circle:hover.
You can change your CSS to this:
.circle {
display:block;
text-decoration:none;
border-radius:50%;
width:100px;
height: 100px;
background: #ffd300;
text-align:center;
transition: all 0.8s ease-out;
box-shadow:inset 0px 0px 0px 50px #ffd300;
font-size: 0;
z-index: -1;
border: 10px solid #ffd300;
}
.circle:hover {
box-shadow:none;
background: black;
transition: all 0.2s ease-out;
}
Basically, move the back background to hover state and get rid of the box-shadow. Of course you'll have the border on hover, because it goes with your approach, but at least you won't have the border on default state.
Remember that you can use multiple box-shadows by simply separating them with a comma, but either way, no matter how many you add, you will have this border because the border-radius:50% will add it. For reference, try taking the border-radius definition out and you'll see that border disappear.
In short: the only way to get rid of that border at all times, is to use 2 elements: an outer div with background color #ffd300 and an inner div with background color #000 and the J, otherwise you'll have that border, it's just how CSS works
if you add to the CSS a border-width: 0px;. See http://www.w3schools.com/cssref/pr_border-width.asp
I wanted a button to move down a few pixels on hover, but it comes back up again. Shouldn't it stay where it is while you're still hovering on it?
Email Me
.btn {background: #2ecc71; padding: .5em 1em; border-radius: 3px; color:white; font-size: 1.5em; text-shadow:2px 2px 2px #178345; box-shadow: 0px 1px 1px #21a559; transition: transform 0.5s ease 0s;}
.btn:hover {background: #28b865; transform: translate(0px, 3px);}
http://codepen.io/anon/pen/zICBw
The problem is inline element can't be transformed properly. If you set the transform right in normal state, you'll see the transform takes no effect. However it does have a little effect on animation, maybe because while animating, the element's display becomes inline-block (or block in some other cases, at least while being animated, the transform can take effect). After the animation completes, it returns back to inline. So the button's position is set back like as the translate transform has no effect.
Your button is actually an a element, which has inline display by default. You can simply change its display to inline-block or block and it works OK:
.btn {
/* ... */
display:inline-block;
}
Updated demo.
Why not simply transition top? You'll need to position the element, but it will accomplish the same without the reversion.
The problem with transitioning on transform is you change the plane the element occupies, which causes the hover state to no longer trigger. One way around this is to also apply a base transform state to the element.
Demo Fiddle
.btn {
background: #2ecc71;
padding: .5em 1em;
border-radius: 3px;
color:white;
font-size: 1.5em;
text-shadow:2px 2px 2px #178345;
box-shadow: 0 1px 1px #21a559;
transition: top .5s ease;
top:0px;
position:relative;
}
.btn:hover {
background: #28b865;
top:3px;
}