CSS Hover Treat Element As Square - css

I have a down arrow created in CSS however I would like for it to be treated like a square. Currently, to trigger any of the hover effects, you need to hover over one of the lines. I would like to hover in between the lines to achieve the same effect but I can't think of anything that works.
Unfortunately I'm horrible when it comes to explaining problems so searching was difficult, so hopefully I can receive help here. I have a snippet below with my CSS.
.down:before {
transform: rotate(55deg) translateX(-20px);
}
.down:after {
transform: rotate(-55deg) translateX(20px);
}
.down:before,
.down:after {
content: '';
background-color: #000;
display: block;
height: 2px;
width: 40px;
transition: all 500ms ease-in-out;
}
.down:hover:before,
.down:hover:after {
background-color: #808080;
}
/* FOR VISIBILITY IN SNIPPET */
.down {
position: absolute;
top: 50px;
left: 50px;
}

Disclaimer: These values may require adjustments depending upon the usage.
This can be done by setting a padding for the element.
padding-top: 50px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
or combined padding: top right bottom left
padding: 50px 10px 10px 10px;
See the demo below:
.down:before {
transform: rotate(55deg) translateX(-20px);
}
.down:after {
transform: rotate(-55deg) translateX(20px);
}
.down:before,
.down:after {
content: '';
background-color: #000;
display: block;
height: 2px;
width: 40px;
transition: all 500ms ease-in-out;
}
.down:hover:before,
.down:hover:after {
background-color: #808080;
}
/* FOR VISIBILITY IN SNIPPET */
.down {
position: absolute;
top: 50px;
left: 50px;
padding-top: 50px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

Related

animating :after pseudo element does not work

I am new to coding, I have tried various solutions from similar questions asked, but nothing seems to work.
I have the following problem:
I made a breadcrumb, including various divs with :before and :after elements - shaping them like connected arrows.
The problem is, I made an animation for the breadcrumb element to fade-in-down. However, no matter in what combination I tried -> The :after element does not animate properly, or at all.
It kinda just pops up after :before and the parent div .breadcrumb have finished sliding in. Can anybody help me here, or has anyone maybe have aa clue?
... I have tried animating the :after element separatly, with transition, with animation-delay etc...nothing seems to work...everything slides in fine from top, excep the :after element, which just pops up ugly after the animation from my ".breadcrumb" is finished.
<div class="breadcrumb_wrapper">
Lasermaschinen
Serien
Unterserien
Produkt
.breadcrumb_wrapper {
position: fixed;
display: flex;
align-items: center;
width: 100%;
height: auto;
margin-top: 120px;
text-align: center;
}
.breadcrumb_element {
padding: 0 2rem 0 2rem;
width: auto;
line-height: 32px;
min-height: 32px;
max-height: 32px;
background: var(--Breadcrumb-gradient);
position: relative;
text-align: center;
margin-left: 0.5rem;
color: var(--nav-text-color-and-general-background);
cursor: pointer;
text-decoration: none;
animation: fade-in-down 0.5s ease-in-out;
}
.breadcrumb_element:before {
content: "";
position: absolute;
top: 4.69px;
left: -11.32px;
width: 22.427px;
height: 22.427px;
background: var(--nav-text-color-and-general-background);
transform: rotate(45deg);
z-index: 1;
border-top: 1px solid #F0F0F0;
border-right: 1px solid #F0F0F0;
border-top-right-radius: 5px;
}
.breadcrumb_element:after {
content: "";
position: absolute;
top: 4.69px;
right: -11.6px;
width: 22.427px;
height: 22.427px;
background: var(--Breadcrumb-arrow-gradient);
transform: rotate(45deg);
z-index: 2;
border-top-right-radius: 5px;
animation: fade-in-down 0.5s ease-in-out;
}
#keyframes fade-in-down {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
Without seeing your HTML code I just had to take a guess at how you need this but here is an example with the after pseudo element coming in from the top and sitting on top of the before pseudo. Hope this helps you get what you are looking for. You can have it come in from any direction that you want.
ul {
list-style: none;
display: flex;
overflow: hidden;
}
li {
margin-left: 20px;
margin-right: 20px;
position: relative;
}
li::before {
content: '';
width: 20px;
height: 20px;
background-color: green;
position: absolute;
right: -25px;
}
li::after {
content: '';
width: 20px;
height: 20px;
background-color: red;
position: absolute;
right: -25px;
top: -100px;
transition: all 1s;
}
li:hover:after {
top: 0;
}
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>

css: how to prevent absolutely positioned :after element from scaling during transition?

I have an absolutely positioned button on the bottom left cornor. The size is fixed at 15px width and height.
The button has an :after element to increase the clickable area size.
When you hover over the button, the button expands. But this also increases size of the :after element.
How do you prevent the :after element from scaling scale(1.5) with the button element?
I tried playing around with width and height properties but this messes up the positioning.
body {
position: relative;
height: 100vh;
padding:0;
margin: 0;
}
p {
margin: 0;
padding: 0;
}
button {
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: #ffd86e;
position: absolute;
bottom: 15px;
left: 15px;
z-index: 10000;
}
button::after {
content: '';
/* z-index: -100000; */
position: absolute;
bottom: 50%;
left: 50%;
height: 50px;
width: 50px;
transform: translate(-50%, 50%);
background: transparent;
border: 1px solid black;
}
button:hover {
transform: scale(1.5);
transition: transform 0.2s;
}
<p>element is left bottom corner</p>
<button></button>
Invert the styles applied I.E. apply the styles applied to the button to the :after element and vice-versa. because otherwise the :after element will also expand when hovered over the button
button {
position:relative;
border:1px solid #000;
display: block;
padding: 1.5rem 2.5rem;
}
button::after {
content: '';
z-index: -100000;
position: absolute;
bottom: 50%;
left: 50%;
transform: translate(-50%, 50%);
display: block;
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: red;
z-index: 10000;
}
button:hover:after {
transform: translate(-50%, 50%) scale(1.5);
transition: transform 0.2s;
}
<p>element is left bottom corner</p>
<button></button>
Just create a second button which will act as a disguise. The button than you want has been given class="orgBut" and the disguised button which will be responsible for adding the borders is given class="afBut".
Both have the same position and properties, just the z-index of afBut is set to 0 so that it goes behind the orgBut.
The ::after selector is given to the afBut i.e. the disguised button which is behind your original button. And hover effect is given to the orgBut.
And that's it.
When you hover above the original button the cursor never goes to the button behind it and that is why the borders that you set are left un-affected.
The code is attached!!
`.orgBut {
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: #ffd86e;
position: absolute;
bottom: 15px;
left: 15px;
z-index: 10000;
}
.afBut {
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: #ffd86e;
position: absolute;
bottom: 15px;
left: 15px;
z-index: 0;
}
.afBut::after {
content: '';
/* z-index: -100000; */
position: absolute;
bottom: 50%;
left: 50%;
height: 50px;
width: 50px;
transform: translate(-50%, 50%);
background: transparent;
border: 1px solid black;
}
.orgBut:hover {
transform: scale(1.5);
transition: transform 0.2s;
}`
<p>element is left bottom corner</p>
<button class="orgBut"></button>
<button class="afBut"></button>
Feel free for any further issues

CSS3 Full Width Trapezoid / Polygon with text?

I'm trying to redo a client site that's currently not responsive and throughout the site she has long images that are trapezoids with text inside. Of course, on devices, you can barely read it.
So I'm trying to turn it into CSS using shapes. Tried a bunch of examples but nothing working at the moment. I think the difference is the examples seem to use hard width numbers instead of 100% for fluid width. I have a pen here: https://codepen.io/anon/pen/KmgoqE and here's the code I'm playing with as I post this (still playing, of course):
h2.test-text {
background: #000;
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -4%;
bottom: -11%;
left: -3%;
right: -3%;
z-index: -1;
-webkit-transform: perspective(50em) rotateX(-30deg);
transform: perspective(50em) rotateX(-30deg)
}
You have already good answers
To give another try. I have opted to fix your current attempt.
Basically the problem is that the background should be on the pseudo instead of on the base
h2.test-text {
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -0px;
bottom: -50%;
left: 0px;
right: 0px;
z-index: -1;
background: #000;
transform: perspective(20em) rotateX(-45deg);
transform-origin: top;
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
And now a fancy efect
h2.test-text {
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
perspective: 20em;
animation: tilt 2s infinite alternate linear;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -0px;
bottom: -50%;
left: 0px;
right: 0px;
z-index: -1;
background: #000;
transform: rotateX(-45deg);
transform-origin: top;
}
#keyframes tilt {
from {perspective-origin: left}
to {perspective-origin: right}
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
By using pseudo elements, and skew them, you can achieve that.
This one works if the line breaks up to 3 lines, and if you need more, a media query will fix that.
h2.test-text {
background: #000;
color: #FFF;
padding: 5px;
font-size: 30px;
width: calc(100% - 120px);
margin: 0 auto;
text-align: center;
position: relative;
}
h2.test-text:before,
h2.test-text:after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 70px;
background: inherit;
z-index: -1;
}
h2.test-text:before {
left: -35px;
transform: skewX(30deg)
}
h2.test-text:after {
right: -35px;
transform: skewX(-30deg)
}
h2.test-text.nr2 {
margin-top: 20px;
width: calc(60% - 100px);
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
<h2 class="test-text nr2">Check out what our Clients are Saying</h2>
You can achieve this effect by using the the common transparent border trick to achieve css triangles. Just instead of even borders and only one set to non-transparent you use different border sizes and two colors. I colored the right edge differently so it's easier to see what's going on.
h2.test-text {
background: #bada55;
color: #FFF;
font-size: 30px;
padding: 5px;
line-height: 1;
width: 80%;
text-align: center;
position: relative;
margin:40px;
}
h2.test-text:before, h2.test-text:after {
content:"";position:absolute;top:0;width:0;height:0;
border-style:solid;
border-width:20px 15px;
}
h2.test-text:before{
left: -30px;
border-color: #bada55 #bada55 transparent transparent;
}
h2.test-text:after {
right: -30px;
border-color:blue transparent transparent red;
}
<h2 class="test-text">Whatever somebody says…</h2>

CSS: How do I make the lines in this hover effect stay with the word inside of it?

This is my modification of someone else's hover effect. So I am not familiar with the working of btn-2 class.(I don't know the syntax used)
Here is my CSS code:
* {
box-sizing: inherit;
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
}
body {
background-color: black;
}
a {
text-decoration: none;
color: tomato;
font-size: 50px;
font-family: 'Oswald', sans-serif;
}
.container {
padding: 1em;
text-align: center;
vertical-align: middle;
}
.btn-2 {
letter-spacing: 10px;
}
.btn-2:hover,
.btn-2:active {
letter-spacing: 30px;
}
.btn-2:after,
.btn-2:before {
border: 1px solid rgba(tomato, 0);
bottom: 2px;
top: 2px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.btn-2:hover:after,
.btn-2:hover:before {
backface-visibility: hidden;
border-color: tomato;
transition: width 350ms ease-in-out;
width: 50%;
}
.btn-2:hover:before {
bottom: auto;
top: 0;
width: 50%;
}
I want to use the effect for button in my navigation bar. But I have 3 problems to solve:
I want the lines above and below the word that appear when you hover it to be of the same width as the word.
I want the word to be centered relative to the line. That is, the line should grow out from the middle point of the word.
The lines isn't going where the word is going.
Some discoveries I make, which I don't know the cause of:
The 2 lines will be longer when .comtainer{padding=1em} than 5em.
When I delete text-align and vertical-align in the .container class, the hovering lines stay centered, but the word goes to the left of the window.
I'm not sure how good I understand you, but here some example I made
a {
color: #333;
display: inline-block;
padding: 15px 0;
position: relative;
text-align: center;
text-decoration: none;
transition: all 250ms ease-in-out;
&:before,
&:after{
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 2px;
background-color: #333;
transition: all 250ms ease-in-out;
}
&:before {
top:0;
}
&:after {
bottom: 0;
}
&:hover {
letter-spacing: 5px;
&:before,
&:after {
width: 100%;
}
}
//Trick is here
span {
&:before {
content:attr(title);;
letter-spacing: 5px;
display:block;
height:1px;
color:transparent;
overflow:hidden;
visibility:hidden;
margin-bottom:-1px;
}
}
}
<span title="Hover Me">Hover Me</span>
You can check my example here

How to rotate pseudo element css

I want to recreate this icon using css pseudo elements (as a toggle indicator):
I have created the nececcary pseudo elements using ::after, ::before and tried to rotate them using transform: rotate(90deg).
How can I tell them to rotate around their own center? I have tried transform-origin: 50% 50%; which does not work. Right now, both pseudo elements got the same right: 10px; but they are not placed above each other, instead they are next to each other.
You can check this JS FIDDLE to illustrate the problem.
First you can use :before and :after pseudo elements and create shape like this DEMO
After that you can rotate parent element for 45deg and get desired result.
.el {
margin: 50px;
position: relative;
transform: rotate(45deg);
display: inline-block;
}
.el:before,
.el:after {
content: '';
width: 30px;
height: 30px;
position: absolute;
}
.el:before {
border-top: 4px solid black;
border-left: 4px solid black;
top: -10px;
left: -10px;
}
.el:after {
border-bottom: 4px solid black;
border-right: 4px solid black;
top: 10px;
left: 10px;
}
<div class="el"></div>
Update: You can also add some transition on :hover like this
.el {
margin: 50px;
position: relative;
transform: rotate(45deg);
display: inline-block;
cursor: pointer;
}
.el:before,
.el:after {
content: '';
width: 30px;
height: 30px;
position: absolute;
transition: all 0.3s ease-in;
}
.el:before {
border-top: 4px solid black;
border-left: 4px solid black;
top: -10px;
left: -10px;
}
.el:after {
border-bottom: 4px solid black;
border-right: 4px solid black;
top: 10px;
left: 10px;
}
.el:hover:before {
top: -15px;
left: -15px;
}
.el:hover:after {
top: 15px;
left: 15px;
}
<div class="el"></div>
transform-origin works fine, it's just that
a) 50% 50% (the object's center) is the default, and
b) you have to center the content of the box. That's a bit tricky because the icon you use doesn't require the full line height. Try adding
::before, ::after {
padding-bottom: .17em;
}
modify the style of #pseudo::after as right: 0;
#div {
background: blue;
width: 80px;
height: 80px;
transform: rotate(45deg);
}
/* tested but not working */
#pseudo::after,
#pseudo::before {
/* transform-origin: 50% 50%; */
}
#pseudo::after {
content: '›';
font-size: 50px;
color: green;
right: 0;
position: absolute;
transform: rotate(90deg);
top: 40px;
}
#pseudo::before {
content: '›';
font-size: 50px;
position: absolute;
color: green;
right: 10px;
top: 10px;
transform: rotate(-90deg);
}
<div id="div"></div>
<div id="pseudo"></div>

Resources