I am creating a very simple navbar and I want hover transitions on the links. I would like to add ::before elements in each link to smoothly transition a different color background on hover. The problem is (as far as I am concerned) that those ::before elements ignore their z-index staking and they hide the link text behind.
I would link to know if I am trying to do something impossible or there is actually a solution I am unable to find.
ul.menu-principal>li {
display: inline-block;
}
ul.menu-principal>li>a {
color: #000;
display: block;
text-transform: uppercase;
padding: 10px;
position: relative;
z-index: 96;
}
ul.menu-principal>li>a::before {
content: '';
position: absolute;
z-index: 95;
top: 0;
left: 0;
width: 100%;
height: 0;
background: orange;
transition: all .2s linear;
}
ul.menu-principal>li>a:hover::before {
height: 100%;
}
ul.menu-principal>li:hover a {
color: #fff;
}
<ul class="menu-principal">
<li>Item-01</li>
<li>Item-01</li>
<li>Item-01</li>
<li>Item-01</li>
</ul>
Website
http://canfosses.mastercamping.com
Thank you all for the responses.
You can just use for your case z-index: -1:
ul.menu-principal>li {
display: inline-block;
}
ul.menu-principal>li>a {
color: #000;
display: block;
text-transform: uppercase;
padding: 10px;
position: relative;
z-index: 96;
}
ul.menu-principal>li>a::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 0;
background: orange;
transition: all .2s linear;
}
ul.menu-principal>li>a:hover::before {
height: 100%;
}
ul.menu-principal>li:hover a {
color: #fff;
}
<ul class="menu-principal">
<li>Item-01</li>
<li>Item-01</li>
<li>Item-01</li>
<li>Item-01</li>
</ul>
Related
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>
I would like to know the CSS code used to make the underline effect for the menu items of this website : https://www.kevin-missud-charpente.fr/
Thanks in advance.
this is better
body,html {
margin: 0;
font: bold 14px/1.4 'Open Sans', arial, sans-serif;
background: #fff;
}
ul {
margin: 150px auto 0;
padding: 0;
list-style: none;
display: table;
width: 600px;
text-align: center;
}
li {
display: table-cell;
position: relative;
padding: 15px 0;
}
a {
color: #000;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #000;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
#media screen and (max-height: 300px) {
ul {
margin-top: 40px;
}
}
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Support</li>
</ul>
this is on hover underline effect
Here a link to codepen with the same underline animation.
https://codepen.io/Nerd/details/zBmAWV
HTML
<nav>
Hover me!
</nav>
CSS
nav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
position: relative;
color: #000;
text-decoration: none;
font-size: 42px;
font-family: sans-serif;
&:hover {
color: #000;
&:before {
visibility: visible;
transform: scaleX(1);
}
}
&:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
}
So I've got a problem where I've got two tabs (https://codepen.io/databell/pen/LYjxvyx) where the first tab opens up content and the second opens up a modal.
Now to be clear, those functions work. That's not the issue. So for those purposes, I deleted those out of my example. Focusing on CSS here.
My problem is I want plus + symbols to appear to the right side of each tab (really a div) and instead one tab has the symbol to the far right of the container, even though the tab is set to width 100%. So I'm stumped as to what the problem is.
This is meant to go into a Shopify store using the Dawn theme, so I'm using their elements here to create this interface.
Here's the code.
<div id="info-additions" class="product__accordion accordion info-additions-content" >
<details>
<summary>
<div class="summary__title info-additions-tab g-flex">
<h2 class="h4 accordion__title t-body benefits">
Tab One
<span></span>
</h2>
</div>
<div class="summary__title info-additions-tab g-flex">
<modal-opener class="product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-ingr">
<button id="ProductPopup-ingr" class="summary__title t-body ingredients" type="button" aria-haspopup="dialog" data-additions-tab="ingredients">
<h2 class="h4 accordion__title">
Tab Two
<span></span>
</h2>
</button>
</modal-opener>
</div>
</summary>
<div class="accordion__content rte">
<p>Content</p>
</div>
</details>
</div>
CSS:
body {
font-size: 1.6rem;
}
*, ::before, ::after {
box-sizing: inherit;
}
.h0, .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {
letter-spacing: .06rem;
line-height: 1.3;
}
.h4, h4 {
font-size: 1.6rem;
}
.grid {
list-style: none;
}
.g-flex {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.accordion summary {
cursor: pointer;
display: flex;
position: relative;
list-style: none;
line-height: 1;
padding: 1.5rem 0;
}
.accordion__title {
display: inline-block;
max-width: calc(100% - 6rem);
min-height: 1.6rem;
margin: 0;
word-break: break-word;
}
details > * {
box-sizing: border-box;
}
.accordion__title {
word-break: break-word;
}
.accordion .summary__title {
display: flex;
flex: 1;
}
#info-additions {
clear: both;
height: auto;
margin: 15px 0 0;
border-top: 2px solid;
border-bottom: 2px solid;
width: 100%;
}
.info-additions-content {
position: relative;
height: 0;
transition: .6s var(--a-cubic-1);
}
.info-additions-tab {
justify-content: space-between;
}
.info-additions-tab span {
display: block;
position: absolute;
width: 18px;
height: 18px;
top: 13px;
right: 2rem;
}
.info-additions-tab button {
position: relative;
padding: 16px 0!important;
line-height: 1;
font-weight: 500;
text-align: left;
}
.info-additions-tab button.benefits {
width: 50%;
}
.info-additions-tab .product-popup-modal__opener {
width: 100% !important;
}
.info-additions-tab button.ingredients {
width: 100%;
}
.info-additions-tab span {
display: block;
position: absolute;
width: 18px;
height: 18px;
top: 13px;
right: 2rem;
}
.info-additions-tab span:before,
.info-additions-tab span:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
width: 2px;
height: 18px;
background-color: black;
transition: 0.3s;
}
.info-additions-tab button:not(.active) span:after {
-webkit-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
.info-additions-content {
position: relative;
height: 0;
transition: 0.6s var(--a-cubic-1);
}
.info-additions-content [data-additions-content] {
position: absolute;
width: 100%;
top: 0;
left: 0;
padding: 5px 0 20px;
opacity: 0;
pointer-events: none;
transition: 0.3s 0s;
}
.info-additions-content [data-additions-content].active {
opacity: 1;
pointer-events: auto;
transition-delay: 0.4s;
}
#info-additions button {
padding: 0;
background: transparent;
color: inherit;
cursor: pointer;
border: 0;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
transition: 0.2s;
}
if you want an absolute element like + to stay in the parent element you have to set the position of the parent to "relative".
you have two problems. summary__title doesn't have a position so + doesn't stay in it .
for the second tab, your modal button has a relative position that makes the + stay inside of it instead of the summary__title.
.accordion .summary__title {
...
position: relative; // add position
}
#info-additions button {
...
position: unset; // unset the position of the button
}
I am trying to write code that mimics this animation as much as possible.
I have been going over keyframe animations & I think that they can be used to do what I need them to do.
I effectively want to have three things happen when the user hovers over the parent element. The first is the color
on the right side of the element will change dynamically (as in the picture & as in the example code), the
icon will animate into the picture & then the text will then animate.
I am new to programming & I am looking for some direction.
Example of finished product: https://imgur.com/a/bxV1V1B
DEMO
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
}
a:hover:after {
width: 15%;
}
<div class="wrapper">
<span>Hover Me!</span>
</div>
Here you go. I made a CSS animation for you which will rotate and translate a new i that I have added into the HTML. I used font awesome for the check with the circle around it. Take a look:
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
visibility: hidden;
}
a:hover:after {
width: 15%;
visibility: visible;
}
#check {
right: 2px;
top: 8px;
position: absolute;
display: none;
z-index: 3;
transition: right .35s;
}
a:hover #check {
animation:spin .35s linear;
display: block;
}
#keyframes spin {
0% {
transform: translate(25px) rotate(0deg);
}
100% {
transform: translate(0px) rotate(360deg);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<span>Hover Me!</span><i id="check"style="font-size:22px; color:lightgrey" class="fa fa-check-circle"></i>
</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>