I'm using mix-blend-mode to change the color of my hamburger menu but it isn't working. The menu stays the some color regardless of what the background is. Here's the CSS and HTML
:root {
--black-color: #3F3D3C;
--white-color: #FAF9F6;
--taupe-color: #D8C7B8;
--grey-color: #CCC5C2;
}
.menu {
position: fixed;
top: 0;
right: 0;
z-index: 1;
aspect-ratio: 1 / 1;
width: 5%;
max-width: 25px;
margin-right: 1rem;
margin-top: 1rem;
}
.menu .toggler {
position: absolute;
margin: auto;
z-index: 2;
cursor: pointer;
width: 100%;
height: 100%;
opacity: 0;
}
.menu .icon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
aspect-ratio: 1 / 1;
width: 100%;
background: transparent;
}
.menu .icon>div {
position: relative;
width: 100%;
height: 0.5px;
background: var(--black-color);
mix-blend-mode: difference;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
}
.menu .icon>div:before {
content: '';
position: absolute;
top: -4px;
width: 100%;
height: 0.5px;
z-index: 1;
background: inherit;
mix-blend-mode: difference;
}
.menu .icon>div:after {
content: '';
position: absolute;
top: 4px;
width: 100%;
height: 0.5px;
z-index: 1;
background: inherit;
mix-blend-mode: difference;
}
.black {
background-color: var(--black-color);
height: 100vh;
width: 100vw;
}
.grey {
background-color: var(--grey-color);
height: 100vh;
width: 100vw;
}
.white {
background-color: var(--white-color);
height: 100vh;
width: 100vw;
}
<div class="menu">
<input type="checkbox" class="toggler" onclick="document.getElementById('overlay').style.opacity='1'">
<div class="icon">
<div></div>
</div>
<div class="overlayHidden" id="overlay">
<nav>
<div id="nav-links"></div>
</nav>
</div>
</div>
<div class="white">content with different background color</div>
<div class="black">content with different background color</div>
<div class="grey">content with different background color</div>
where am I going wrong?
EDIT:
updated the code so you can run snippet
Related
I have a gallery item with some image in its body. It has to display MORE link in the center of the body when I hover over gallery item (which works just fine) and display 0.5 opacity when I hover over MORE link. Even though z-index is bigger than parent's, for some reason :hover event simply does not fire. Any clue on how to fix this? My cursor: pointer also does not work.
HTML:
<div class="gallery _flex-between">
<div class="gallery__item gallery-item _flex-column-center">
<div class="gallery-item__body">
<div class="gallery-item__more-container">
<a class="gallery-item-more">More →</a>
</div>
<img src="/resources/projects/1.jpg" alt="" class="gallery__img">
</div>
<div class="gallery-item__footer">
Everlasting Summer
</div>
</div>
</div>
CSS:
._absolute-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.gallery {
margin-top: 4em;
width: 90%;
}
.gallery-item__footer {
font-size: 1.6rem;
margin-top: 1em;
width: 100%;
border: 1px solid black;
text-align: center;
border-radius: 35px;
padding: .5em 0;
letter-spacing: 2px;
background-color: white;
transition: background-color .3s, color .3s;
}
.gallery__item {
position: relative;
width: 30%;
max-width: 600px;
}
.gallery-item__more-container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
transition: background-color .3s;
border-radius: 35px;
z-index: 2;
}
.gallery-item__link {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
z-index: 4;
}
.gallery-item-more {
position: relative;
z-index: 1000000000;
width: 50%;
background-color: rgba(255, 255, 255, 1);
opacity: 0;
transition: background-color .3s;
color: black;
font-weight: bold;
letter-spacing: 1px;
padding: 1em 0;
border-radius: 35px;
text-align: center;
cursor: pointer;
}
.gallery-item-more:hover {
background-color: rgba(255, 255, 255, .5);
}
.gallery-item__link:hover ~ .gallery-item__footer {
background-color: black;
color: white;
}
.gallery-item__link:hover ~ .gallery-item__body .gallery-item__more-container {
background-color: rgba(0,0,0,0.8);
}
.gallery-item__link:hover ~ .gallery-item__body .gallery-item-more {
opacity: 1;
}
.gallery-item__body {
width: 100%;
position: relative;
}
._flex-column-center {
display: flex;
flex-direction: column;
align-items: center;
}
.gallery__img {
object-position: top;
height: 25vw;
width: 100%;
border-radius: 35px;
}
Move the image before the more-button and it should work: Codepen
<div class="gallery _flex-between">
<div class="gallery__item gallery-item _flex-column-center">
<div class="gallery-item__body">
<img src="/resources/projects/1.jpg" alt="" class="gallery__img">
<div class="gallery-item__more-container">
<a class="gallery-item-more">More →</a>
</div>
</div>
<div class="gallery-item__footer">
Everlasting Summer
</div>
</div>
</div>
When hovering on each circle at the corner, background color in the main area should be changed so matches the color of the circle, and there is an adequate paragraph showing at the same time.
I have tried transition, opacity... but couldn't get it work.
Note, HTML has to be untouched.
* {
margin: 0;
padding: 0;
}
body {
position: relative;
height: 100vh;
text-align: center;
}
p {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.bg {
position: relative;
height: 100vh;
background-color: #333;
}
.circle {
height: 10px;
width: 10px;
border-radius: 50%;
border: white solid 2px;
z-index: 1;
}
.red.circle {
position: absolute;
top: 10%;
left: 10%;
background-color: red;
}
.green.circle {
position: absolute;
top: 10%;
right: 10%;
background-color: green;
}
.blue.circle {
position: absolute;
bottom: 10%;
left: 10%;
background-color: blue;
}
.orange.circle {
position: absolute;
bottom: 10%;
right: 10%;
background-color: orange;
}
p.red {
display: none;
background-color: red;
line-height: 100vh;
}
p.green {
display: none;
background-color: green;
line-height: 100vh;
}
p.blue {
display: none;
background-color: blue;
line-height: 100vh;
}
p.orange {
display: none;
background-color: orange;
line-height: 100vh;
}
<div class="red circle"></div>
<div class="green circle"></div>
<div class="blue circle"></div>
<div class="orange circle"></div>
<div class="bg">
<p class="red">Czerwony</p>
<p class="green">Zielony</p>
<p class="blue">Niebieski</p>
<p class="orange">Pomarańczowy</p>
</div>
Since they are somewhat in the same hierarchy, you can take advantage of the ~ general sibling selector which matches the second element only if it follows the first element (though not necessarily immediately):
/* added */
.red.circle:hover ~ .bg {
background-color: red;
}
.green.circle:hover ~ .bg {
background-color: green;
}
.blue.circle:hover ~ .bg {
background-color: blue;
}
.orange.circle:hover ~ .bg {
background-color: orange;
}
.red.circle:hover ~ .bg p.red { display: block; }
.green.circle:hover ~ .bg p.green { display: block; }
.blue.circle:hover ~ .bg p.blue { display: block; }
.orange.circle:hover ~ .bg p.orange { display: block; }
/* end of edit */
* {
margin: 0;
padding: 0;
}
body {
position: relative;
height: 100vh;
text-align: center;
}
p {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.bg {
position: relative;
height: 100vh;
background-color: #333;
transition: background-color 0.5s ease-in;
}
.circle {
height: 10px;
width: 10px;
border-radius: 50%;
border: white solid 2px;
z-index: 1;
}
.red.circle {
position: absolute;
top: 10%;
left: 10%;
background-color: red;
}
.green.circle {
position: absolute;
top: 10%;
right: 10%;
background-color: green;
}
.blue.circle {
position: absolute;
bottom: 10%;
left: 10%;
background-color: blue;
}
.orange.circle {
position: absolute;
bottom: 10%;
right: 10%;
background-color: orange;
}
p {
transition: background-color 1s ease-in;
}
p.red {
display: none;
background-color: red;
line-height: 100vh;
}
p.green {
display: none;
background-color: green;
line-height: 100vh;
}
p.blue {
display: none;
background-color: blue;
line-height: 100vh;
}
p.orange {
display: none;
background-color: orange;
line-height: 100vh;
}
<div class="red circle"></div>
<div class="green circle"></div>
<div class="blue circle"></div>
<div class="orange circle"></div>
<div class="bg">
<p class="red">Czerwony</p>
<p class="green">Zielony</p>
<p class="blue">Niebieski</p>
<p class="orange">Pomarańczowy</p>
</div>
You can add transition on the .bg class for the desired effect.
I would simplify your code to rely on pseudo element and data-attribute for background and content. It will be then easier to control as you don't need any complex selector:
body {
margin: 0;
background: #333;
min-height: 100vh;
}
.circle {
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
border: white solid 2px;
}
.circle::before {
content: attr(data-text);
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: white;
line-height: 100vh;
font-size: 80px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -2;
background: inherit;
opacity: 0;
transition: 1s;
}
.circle:hover::before {
opacity: 1;
}
.circle.red {
top: 10%;
left: 10%;
background: red;
}
.circle.green {
top: 10%;
right: 10%;
background: green;
}
.circle.blue {
bottom: 10%;
left: 10%;
background: blue;
}
.circle.orange {
bottom: 10%;
right: 10%;
background: orange;
}
<div class="circle red" data-text="Czerwony"></div>
<div class="circle green" data-text="Zielony"></div>
<div class="circle blue" data-text="Niebieski"></div>
<div class="circle orange" data-text="Pomarańczowy"></div>
The css only solution of #soulshined is great, but just in case anyone wants to use javascript - here's a hint:
const bg = document.querySelector(".bg");
const circles = document.querySelectorAll(".circle");
circles.forEach(circle => circle.addEventListener("mouseenter", (e) => {
const style = getComputedStyle(e.target);
const backgroundColor = style.backgroundColor;
bg.style.backgroundColor = backgroundColor;
}))
I have a circle here that increases with size when I hover over it. When I do that the "+" I have in the middle "shakes".
HTML
<div class='test-ani'>
<span>+</span>
</div>
CSS (SCSS)
.test-ani {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: cornflowerblue;
user-select: none;
cursor: pointer;
&:hover {
transition: .5s;
width: 120px;
height: 120px;
}
span {
color: #ffdb58;
font-size: 50px;
padding: 0;
margin: 0;
}
}
VISUAL GIF
Animate transform rule:
section {
position: relative;
width: 100%;
height: 100%;
}
.test-ani {
position: absolute;
top: 50%;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: cornflowerblue;
user-select: none;
cursor: pointer;
}
.test-ani:hover {
transition: transform .5s;
transform: scale(1.2);
}
.test-ani span {
color: #ffdb58;
font-size: 50px;
padding: 0;
margin: 0;
}
<section>
<div class='test-ani'>
<span>+</span>
</div>
</section>
I am trying to produce this effect with CSS. I have tried creating a box with a triangle and then using negative margin to overlap it onto the circle, but cannot get it right.
Many thanks for any help.
fiddle
https://jsfiddle.net/Hastig/n3w0tztv/
Getting the circle to stay vertically centered and have the text container min-height the height of circle is tricky and is not worked out in this example. A cheap fix is adding align-items: center to .container at a breakpoint with #media.
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: white;
height: 100vh;
}
.container {
display: flex;
width: 100%;
padding: 10px;
overflow: hidden;
}
.left {
position: relative;
display: flex;
width: 150px;
height: 150px;
margin-top: -4px;
margin-bottom: -4px;
margin-right: -17px;
background-color: #ec847c;;
border-style: solid;
border-color: white;
border-width: 4px;
border-radius: 100%;
z-index: 10;
}
.right {
position: relative;
display: flex;
flex: 2;
font-size: 20px;
color: white;
background-color: #4ca132;
}
.square {
position: absolute;
left: 0;
width: 50px;
height: 50px;
background-color: white;
overflow: hidden;
}
.square-top { top: 0; }
.square-btm { bottom: 0; }
.square::before {
content: "";
position: absolute;
display: flex;
width: 100%;
height: 100%;
transform: rotate(45deg) scale(2);
background-color: #4ca132;
z-index: 1;
}
.square-top::before { top: 50%; left: 50%; }
.square-btm::before { bottom: 50%; left: 50%; }
.text {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px 20px 20px 40px;
}
<div class="container">
<div class="left">
</div>
<div class="right">
<div class="square square-top"></div>
<div class="square square-btm"></div>
<div class="text">
Roles play an extremely important part in family funtion.
</div>
</div>
</div>
Safari has full support for FlexBox according to caniuse.
I am simply trying to stack some differently sized div's on top of each other using flexbox. I am genuinely curious as to why this works in Chrome/Firefox but not in Safari:
<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>
.container {
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.container div {
position: absolute;
}
.inner-one {
width: 13rem;
height: 13rem;
border-radius: 50%;
background-color: green;
}
.inner-two {
width: 11rem;
height: 11rem;
border-radius: 50%;
background-color: purple;
}
See JSFiddle here: https://jsfiddle.net/19n95exf/3/
Because position: absolute; break display: flex, use transform: translate instead
.container {
position: relative;
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
}
.container div {
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.inner-one {
width: 13rem;
height: 13rem;
background-color: green;
}
.inner-two {
width: 11rem;
height: 11rem;
background-color: purple;
}
<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>
Or give the inner elements a left/top value
.container {
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.container div {
border-radius: 50%;
position: absolute;
}
.inner-one {
left: 1.5rem;
top: 1.5rem;
width: 13rem;
height: 13rem;
background-color: green;
}
.inner-two {
left: 2.5rem;
top: 2.5rem;
width: 11rem;
height: 11rem;
background-color: purple;
}
<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>