Adding border on hover shifts surrounding elements - html

Just hover on 'a headline' in the snippet below and you will see how elements are moving. Why?
There's no margin .. And they're only moving when I add border to the inline-block element. Try to add more border width in section.twelve a like:
section.twelve a {
border-bottom: 10px solid #FFFAFF;
}
But if you remove the border everything's fine.. Why is this behavior ? and is it only for border?
I just want to add any styles to the element without effecting the others.
section{
position: relative;
height: 300px;
padding: 15px 80px;
z-index: 1;
}
section h1{
font-size:3em;
font-weight: 100;
line-height: 1.3;
}
section a {
position: relative;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease-in-out;
vertical-align: bottom;
}
section.twelve {
background: #121A5A;
color: #FFFAFF;
}
section.twelve a {
color:#D8315B;
font-weight: 700;
overflow: hidden;
padding: 0px 5px;
transition all 0.2s ease;
border-bottom: 5px solid #FFFAFF;
}
.twelve a:before{
content: "";
top:0; left: 0;
position: absolute;
width:100%; height: 100%;
background: #FFFAFF;
z-index: -1;
transition: all 0.2s ease;
transform: translateX(100%);
}
.twelve a:hover::before {
transform: translateX(-95%);
background: #D8315B;
}
.twelve a:hover{
color: #FFFAFF;
transform: translateX(5px);
border-bottom: 1px solid #FFFAFF;
}
<section class="twelve">
<h1>Write a headline that makes people do kind of a double take whenthey read it.</h1>
</section>

When you add, or change the width, of a border, that changes the size of the element. Hence, by adding the border on hover, the box grows to occupy more space, which naturally shifts the position of surrounding text / elements.
One method to resolve this issue is to always have the border present, so the size of the box is fixed. When the border shouldn't be visible, it's transparent.
Here's an example:
section {
position: relative;
height: 300px;
padding: 15px 80px;
z-index: 1;
}
section h1 {
font-size: 3em;
font-weight: 100;
line-height: 1.3;
}
section a {
position: relative;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease-in-out;
vertical-align: bottom;
}
section.twelve {
background: #121A5A;
color: #FFFAFF;
}
section.twelve a {
color: #D8315B;
font-weight: 700;
overflow: hidden;
padding: 0px 5px;
transition all 0.2s ease;
border-bottom: 5px solid transparent; /* ADJUSTMENT */
}
.twelve a:before {
content: "";
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background: #FFFAFF;
z-index: -1;
transition: all 0.2s ease;
transform: translateX(100%);
}
.twelve a:hover::before {
transform: translateX(-95%);
background: #D8315B;
}
.twelve a:hover {
color: #FFFAFF;
transform: translateX(5px);
border-bottom: 5px solid white; /* ADJUSED */
}
<section class="twelve">
<h1>Write a headline that makes people do kind of a double take whenthey read it.</h1>
</section>

Yes, on hover you are changing element's border, so, element's total height also changes

Related

How to make pull up effect during hovering element? Just see this code once

I am trying to create an effect when div class="container" is being hovered, a smooth upper transition occurs of another div from bottom. Only during hover, this should happen cause I want that .bottom div to be hidden. When that div is not hidden, I can see the effect as I want. But as I hide the bottom div, that hovering effect smooth transition effect cannot be seen. Check this code once.
HTML CODE
<div class="box">
Hello
<div class="bottom">
Everyone
</div>
</div>
CSS code
.box{
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top:80px;
left:0;
/* display: none; */
}
.box:hover .bottom {
display: block;
transition: linear 0.2s;
top:55px;
}
Here is the codepen link
https://codepen.io/Biebk/pen/MWpREqb
First off, rather than display: none to hide the incoming element altogether, you can set its opacity to 0, and then when the parent is hovered, set it to 1, like so:
.bottom {
opacity: 0;
}
.box:hover .bottom {
opacity: 1;
}
I suppose that given you want an incoming "pull-up" effect on hover, you want to that element to also "pull-down" when the hover ends. You can reverse the same effect by using a :not(:hover) on the parent element:
.box:not(:hover) .bottom {
opacity: 0;
}
Also, be sure to set the transition on the non-hovered state. The following example provides the smooth transition you're looking for:
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
left: 0;
transition: all .25s ease;
}
.box:not(:hover) .bottom {
top: 80px;
opacity: 0;
}
.box:hover .bottom {
top: 55px;
opacity: 1;
}
<div class="box">
Hello
<div class="bottom">
Everyone
</div>
</div>
A secondary approach would be to place the bottom div as a sibling to the box, and use the adjacent sibling combinator to apply the hover effects:
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
font-size: 20px;
background: pink;
width: 80px;
text-align: center;
position: absolute;
left: 0;
top: 80px;
opacity: 0;
cursor: default;
transition: all .25s ease;
}
.box:hover + .bottom {
top: 55px;
opacity: 1;
}
<div class="box">
Hello
</div>
<div class="bottom">
Everyone
</div>
Use opacity property rather than display to achieve the desired effect, then
use the following code
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top: 80px;
left: 0;
opacity: 0;
}
.box:hover .bottom{
opacity: 1;
transition: opacity 0.2s , top 1s;
top: 55px;
}
Use the following code.
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.hovered{
transition: all .2s;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top: 80px;
left: 0;
visibility: hidden;
}
.hovered:hover+.bottom {
transition: all .2s;
top: 55px;
visibility: visible;
}
<div class="box">
<div class="hovered">Hello</div>
<div class="bottom">
Everyone
</div>
</div>

Hover effect on CSS button [duplicate]

This question already has answers here:
Keep the pseudo element in between the background and main content
(1 answer)
Avoid z-index working relative to the parent element
(1 answer)
Closed 4 years ago.
I am trying create a hover effect using CSS. Here is the link: http://creativeartbd.com/demo/test.html
Here is the code:
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
text-transform: uppercase;
}
button::before,
button::after {
background:red;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: black;
}
/* BUTTON 5 */
.btn-5 {
overflow: hidden;
}
.btn-5::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-5:hover:after {
height: 100%;
width: 135%;
}
<button class="btn-5">Button 5</button>
now if you run it you can see that there is style when you hover over the button. Now I want to set initial background for this button. So that IF I set the background here:
button {
background: orange;
}
If I do so then the effect is not showing.
Can you tell me why and how can I solve it?
JSFiddle
add z-index:0 to the element to create a stacking context and keep the pseudo element inside. You can then add background
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
z-index:0;
background:orange;
text-transform: uppercase;
}
button::before,
button::after {
background:red;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: black;
}
/* BUTTON 5 */
.btn-5 {
overflow: hidden;
}
.btn-5::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-5:hover:after {
height: 100%;
width: 135%;
}
<button class="btn-5">Button 5</button>
You can also simplify your code like follow:
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
background:
linear-gradient(50deg,red 50%,transparent 50.5%),
orange;
background-size:250% 100%;
background-position: right;
text-transform: uppercase;
transition: all 0.5s;
}
button:hover {
color: black;
background-position: left;
}
<button class="btn-5">Button 5</button>

How to add two hover effects to same div

So, I have a div that appears at the top of my screen, and when you hover over it, at the bottom of the screen, text appears.
I want to add another effect to the div that makes more text appear in a completely different place on the screen, while the other text stays in the same place.
Is that possible? Preferably using CSS/HTML instead of Java or anything?
You can use ~ (tilde) operator to target all your siblings (all should have the same parent) show on hover. Please have a look at the example snippet below:
body { margin: 0; }
.holder {
text-align: center;
height: 100vh;
}
.hover {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
color: red;
font-size: 30px;
font-weight: bold;
border: 2px solid red;
padding: 10px 15px;
cursor: default;
transition: all .2s linear;
}
.hover:hover {
background: rgba(255, 0, 0, 0.1);
}
.hover:hover ~ .show-text {
opacity: 1;
transition: all .2s linear;
}
.show-text {
position: absolute;
opacity: 0;
font-size: 20px;
border-bottom: 1px solid #aaa;
transition: all .2s linear;
}
.one {
bottom: 20%;
left: 20%;
}
.two {
bottom: 20%;
right: 20%;
}
<div class="holder">
<div class="hover">Hover Me!</div>
<div class="show-text one">I'm Text 1</div>
<div class="show-text two">I'm Text 2</div>
</div>
Hope this helps!

Where is text in element coming from?

I was messing around with some buttons online and came by a button that displays an arrow when hovered over.
I'm looking through the css and the html for this element but can't see this arrow they're displaying anywhere.
The button is an a tag with a span inside, like this:
<a href="#" id="makeGroupButton">
<span>Button</span>
</a>
When a user hovers over it some text gets appended to it somehow, but I can't figure out how that's happening.
I made a JsFiddle to show: http://jsfiddle.net/aoprjmxr/
The css is beyond my scope, can anybody help me see where this arrow is getting inserted?
using :after and :before http://jsfiddle.net/aoprjmxr/1/
#makeGroupButton:hover:before {
content: 'before';
display: inline-block;
}
#makeGroupButton:hover:after {
content: 'after';
display: inline-block;
}
like so you can also show background-image: url(path/to/image) and you can also set position and so on
#makeGroupButton span:after
{
content: '';
position: absolute;
top: 0;
right: -14px;
opacity: 0;
width: 10px;
height: 10px;
margin-top: -10px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-top: none;
border-right: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
}
#makeGroupButton:hover span, #makeGroupButton:active span
{
padding-right: 30px;
}
#makeGroupButton:hover span:after, #makeGroupButton:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: white;
right: 0;
top: 50%;
}
This CSS is doing the magic!
Made it with #makeGroupButton span:after and add right: -14px; By default,
when you hover it, then : right: 0; and you can see the span
It's coming using :after css in #makeGroupButton span:after.
I have do some changes in your css to display arrow on hover.
#makeGroupButton
{
letter-spacing: 2px;
text-align: center;
color: white;
font-size: 24px;
font-family: sans-serif;
font-weight: 300;
position: absolute;
width: 220px;
background: green;
overflow: hidden;
transition: all 0.5s;
display:table;
}
#makeGroupButton:hover, #makeGroupButton:active
{
text-decoration: none;
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
#makeGroupButton span
{
display: inline-block;
position: relative;
padding-right: 0;
transition: padding-right 0.5s;
display:table-cell;
vertical-align:middle;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
#makeGroupButton span:after
{
content: '';
position: absolute;
top: 17px;
right: -14px;
opacity: 0;
width: 10px;
height: 10px;
margin-top: -10px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-top: none;
border-right: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(-135deg);
}
#makeGroupButton:hover span, #makeGroupButton:active span
{
padding-right: 30px;
}
#makeGroupButton:hover span:after, #makeGroupButton:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: white;
right: 10px;
}
<a href="#" id="makeGroupButton">
<span>Button</span>
</a>
To remove the arrow check this class #makeGroupButton:hover span:after, #makeGroupButton:active span:after and remove the opacity or right:0 in css and also remove padding in this class css #makeGroupButton:hover span, #makeGroupButton:active span

Animating bottom and top under/overline to meet

I've been working on an element where the "borders" or under/overlines would meet on the left and right side of the element in a slow transition.
This is where I've got so far: http://codepen.io/anon/pen/RRNjgo
.sliding-middle-out:hover {
font-size: 30px;
transition: font-size 2s ease;
}
.dark {
background-color: black;
display: inline-block;
min-width: 200px;
min-height: 300px;text-align: center;
cursor: pointer;
}
.dark h1 {
color: white;
text-align: center;
}
.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle-out h1:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width 2s ease, background-color .5s ease;
}
.sliding-middle-out:hover h1:after {
width: 50%;
background: #b7d333;
}
.sliding-middle-out h1:before {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width 2s ease, background-color .5s ease;
}
.sliding-middle-out:hover h1:before {
width: 50%;
background: #b7d333;
border-left: 1px solid black;
}
<div class="dark sliding-middle-out">
<h1 class="">FAQs</h1>
</div>
One approach I tried was to display borders on the h1 element after the under/overline transition was finished, but couldn't get it to work.
But I cant figure out how i would get the desired effect.
got the base for this project from here.
http://bradsknutson.com/blog/css-sliding-underline/
Take another element like span inside h1 and make border right and left effect on them.
for example
Html
<div class="dark sliding-middle-out">
<h1 class=""><span>FAQs</span></h1>
</div>
css
.sliding-middle-out h1 span {
position: relative;
}
.sliding-middle-out h1 span:after,
.sliding-middle-out h1 span:before {
content: '';
display: block;
margin: auto;
width: 3px;
transition: height 2s ease, background-color .5s ease;
background: #B7D333;
top: 0;
bottom: 0;
height: 0;
position: absolute;
}
.sliding-middle-out h1 span:before {
left: -5px;
}
.sliding-middle-out h1 span:after {
right: -5px;
}
.sliding-middle-out:hover h1 span:after,
.sliding-middle-out:hover h1 span:before {
height:50%;
}
Demo