I am trying to use the blur effect in css to blur the background and z-index to stack the logo on the blurred image but the same is not happening my logo is down under the blurred background.Please let me know the issue.
Styled component heirarchy:
<LandingPageContainer>
<Background />
<LandingPageContentContainer>
<Logo src={piattoLogo} />
<ContentContainer>
<Content>Premium handcrafted delicacies</Content>
<Button>Lets go!</Button>
</ContentContainer>
</LandingPageContentContainer>
</LandingPageContainer>
import styled from 'styled-components';
import landingBackground from '../../../../../img/piatto/CustomerLanding/CustomerLanding.jpg';
export const LandingPageContainer = styled.div`
display: block;
width: 100%;
height: 812px;
background-color: #0d0c0c;
`;
export const Background = styled.div`
width: 390px;
height: 526px;
left: -326px;
top: -80px;
filter: blur(2px);
background: url(${landingBackground}) no-repeat center center/cover;
`;
export const LandingPageContentContainer = styled.div`
display: block;
margin: auto;
padding: auto;
text-align: center;
margin-top: -130px;
z-index: 2;
`;
export const Logo = styled.img`
width: 201px;
height: 164px;
`;
`;
Remember z-index only works on positioned elements (relative, absolute, sticky, fixed).
Related
I'm building the website for the web development company I just registered (which is also intended to be part of my portfolio for job applications) and on my portfolio page, I'm adding a visual list of websites that I've completed for clients, and I'm using display: flex; and align-items: center; to for the wrapper, but they don't seem to be perfectly aligned, the gap on the left is bigger than the gap on the right, and it's more prominent in a mobile view:
Here are the styled-components I'm using below the header:
import React from 'react';
import styled, { keyframes } from 'styled-components';
import { Link } from 'react-router-dom';
import { fadeInUp } from 'react-animations';
export const PortfolioContainer = styled.div`
min-height: 100vh;
width: 100vw;
padding-top: 110px;
`
export const PortfolioHeader = styled.h1`
display: flex;
justify-content: center;
color: ${props => props.txtColor};
`
export const PortfolioWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background: transparent;
padding-top: 15px;
`
export const PortfolioLinkWrap = styled.div`
width: 90%;
height: 80px;
background: ${props => props.background};
border-radius: 15px;
animation: ${props => `${props.num/2}s`} ${keyframes `${fadeInUp}`};
margin-bottom: 10px;
`
export const PortfolioLinkImg = styled.img`
height: 80px;
border-radius: 15px;
`
export const PortfolioLink = styled(Link)`
color: ${props => props.txtcolor};
width: 100%;
height: 80px;
text-align: center;
text-decoration: none;
display: grid;
grid-template-columns: 80px 1fr;
grid-gap: 10px;
align-items: center;
justify-content: center;
transition: 0.3s ease-in-out;
border-radius: 15px;
&:hover {
color: ${props => props.txthovercolor};
background: ${props => props.hoverbackground};
transition: 0.3s ease-in-out;
}
`
And here is the React component:
import React from 'react'
import content from './content.js'
import {
PortfolioContainer,
PortfolioLinkWrap,
PortfolioHeader,
PortfolioWrapper,
PortfolioLink,
PortfolioLinkImg,
} from "./PortfolioElements";
const Portfolio = ({
highlightTxtColor,
elementBg,
elementBg2,
siteText
}) => {
return (
<PortfolioContainer>
<PortfolioHeader txtColor={highlightTxtColor}>
Portfolio
</PortfolioHeader>
<PortfolioWrapper>
{content.map((e,i) => (
<PortfolioLinkWrap
key={e.id}
background={elementBg2}
num={i+1}
>
<PortfolioLink
to={e.link}
target='_blank'
txtcolor={siteText}
txthovercolor={highlightTxtColor}
hoverbackground={elementBg}
>
<PortfolioLinkImg
src={e.img}
/>
{e.text}
</PortfolioLink>
</PortfolioLinkWrap>
))}
</PortfolioWrapper>
</PortfolioContainer>
)
}
export default Portfolio
UPDATE: I figured out that it's because the PortfolioContainer element is wider than the screen. However it's set to width: 100vw; so I'm not sure why that is. I tried setting both the header and the PortfolioWrap element do display: none; to make sure neither of those were affecting it, but it didn't make a difference.
Actually the elements are centered in flex container, But PortfoloioContainer's width is wider than the screen.
Add max-width:100% to your PortfoloioContainer. This will fix the issue.
Hope it helps!
i'm doing an app and i need help !
I made a modal window, and that modal window will be bigger than 100vh, and i need it to have an scroll-bar, and i give it a scroll bar, but the problem is that, the other main scroll-bar needs to be cut, but i jus don't know how eliminate it
Here's the css code of my modal window, i'm usign styled-components in react
import styles from "styled-components";
// TODO Part
export const TodoMain = styles.section`
width: 100%;
min-height 100vh;
overflow-x: hidden;
overflow-y: auto;
background: white;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
`;
export const Todo = styles.div`
width: 80%;
min-height: 150vh;
margin: auto;
border: 3px solid black;
`;
I am trying to make the transition slowly (500ms) scale the Brandsdiv when props.pop changes. pop will equal true or false. Currently, transform: ${props => (props.pop ? "scale(1.2)" : "scale(1)")}; works fine and scales the div when pop = true but the transition is not working - the scaling abruptly changes.
import React from 'react'
import styled from 'styled-components'
const LogoImg = styled.img`
max-width: 100%;
padding: 5px;
`
export default function FeaturedManufacturerLink(props) {
const {
brandPagePath,
logo,
pop
} = props
const Brandsdiv = styled.div`
transition: transform 500ms;
display: flex;
width: 116px;
height: 85px;
border-radius: 50%;
margin: 25px 35px;
align-items: center;
text-align: center;
transform: ${props => (props.pop ? "scale(1.2)" : "scale(1)")};
`
return (
<Brandsdiv pop={pop}>
<a href={brandPagePath}>
<LogoImg src={logo} />
</a>
</Brandsdiv>
)
}
I moved const Brandsdiv. The prop change pop was causing the component to rerender.
I have a Label element with some text and a Span inside. The text of the label changes on user click (it gets shorter/larger). If i put a margin left in the span then when the text of the label gets shorter/larger the span moves with it. I want the span to be static, no matter if the element sitting besides it gets shorter/larger. For some reason i dont know (i am a bit noob with css) position the span with absolute does the work (if you can explain to me why is that it would be great). It's there a more efficient way of doing that? Should i still be using absolute/relative positioning having Flexbox and CSS Grid? Do not pay attention to the <Wrapper> component. That is just a HOC that returns its children to avoid putting everything inside a <div>.
import React, { useState } from 'react';
import styled from 'styled-components';
import Wrapper from '../HOCs/Wrapper';
const ToggleCheckbox = styled.input`
display: none;
`;
const ToggleLabel = styled.label`
cursor: pointer;
padding: 2rem;
display: inline-block;
font-size: 1.6rem;
`;
const ToggleSpanBackground = styled.span`
background-color: #e3dede;
border-radius: 100px;
display: inline-block;
width: 40px;
height: 10px;
position: absolute;
left: 14rem;
top: 2.5rem;
cursor: pointer;
${ToggleCheckbox}:checked + ${ToggleLabel} & {
background-color: #2b90d9;
}
`;
const ToggleSpanButton = styled.span`
width: 2rem;
height: 2rem;
border-radius: 50px;
display: inline-block;
background-color: #e3dede;
position: absolute;
top: -0.5rem;
left: 0.3rem;
${ToggleCheckbox}:checked + ${ToggleLabel} ${ToggleSpanBackground} & {
background-color: #2b90d9;
left: 1.8rem;
}
`;
export default function Toggle(props) {
let [toggle, setToggle] = useState('off');
return (
<Wrapper>
<ToggleCheckbox type='checkbox' id='toggle-checkbox'></ToggleCheckbox>
<ToggleLabel
htmlFor='toggle-checkbox'
onClick={() =>
setToggle((prevState) => {
if (prevState === 'off') {
return 'on';
} else {
return 'off';
}
})
}
>
option: {toggle}
<ToggleSpanBackground>
<ToggleSpanButton></ToggleSpanButton>
</ToggleSpanBackground>
</ToggleLabel>
</Wrapper>
);
}
Well, position absolute effectively takes the element out of the DOM flow. So the thing getting bigger is not touching it any more so when it gets bigger it does not affect its position.
I would make the span have a fixed width, a width big enough for a long or short value.
Hi I'm trying to do an animation on hover, without the hover I would like my circle to make 100% of the height and width
and for some reason I am not able to leave my circle with 100% border radius
like this:
code:
export const TeamCard = styled.div`
background: red;
padding: 10px 0;
& .bgCircle {
border-radius: 50%;
padding: 64px;
background: hotpink;
}
`;
export default function App() {
return (
<TeamCard>
<div className="bgCircle" />
<div class="description">
<h3>huhuehu</h3>
<h3>testing</h3>
</div>
</TeamCard>
example:
https://codesandbox.io/s/dry-river-09ft0
Try using the following styled-div:
export const TeamCard = styled.div`
position: relative;
background: red;
height: 300px;
width: 300px;
& .bgCircle {
border-radius: 100%;
height: 50px;
width: 50px;
background: hotpink;
transition: all ease 333ms;
}
&:hover {
.bgCircle {
position: absolute;
top: 0;
height: 300px;
width: 300px;
border-radius: 0;
left: 0;
right: 0;
}
}
& .description {
position: absolute;
bottom: 0;
}
`;
This is making use of absolute positioning to correctly set where the circle should go. In order to make absolute positioning work, the containing element needs to have a position of something other than 'static'.
The transition property is what provides the animation.