I am using the style component library and am trying to blur the sides of an image like in the following example:
Does anyone have any idea on how to do this? This is the code that I have for the component that I am trying to achieve this on:
import React from "react";
import styled from "styled-components";
const StyledTopicItem = styled.div`
position:relative;
height: 2.5rem;
border: 1px solid black;
border-radius: 10px;
display: flex;
align-items: center;
cursor: pointer;
height:20vh;
justify-content:center
`;
const Topic = styled.div`
position:absolute;
bottom:1px;
font-weight:bold;
`
interface topicItemProps {
topic: string;
setSelectedTopic: (value: string) => void;
}
export const TopicItem = ({ topic, setSelectedTopic }: topicItemProps) => {
return (
<StyledTopicItem
onClick={(e: any) => {
setSelectedTopic(e.target?.innerText);
}}
>
<img alt={""} src={'https://images.unsplash.com/photo-1514921674539-8b1710289b0d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzNDE2fDB8MXxyYW5kb218fHx8fHx8fHwxNjQyNjg0OTgz&ixlib=rb-1.2.1&q=85'} height={150} width={250}/> <br/>
<Topic>{topic}</Topic>
</StyledTopicItem>
);
};
You could use object-fit, background and backdrop-filter . eventually aspect-ratio can help even your boxes if you have more than one and CSS var() to simplify your CSS.
example
img {
display:block;
width:100%;
height:100%;
object-fit:contain;
backdrop-filter: blur(3px);
}
div{
background:var(--bg) center center / cover transparent;
aspect-ratio: 3 / 2;
border:solid;
height:200px;
}
body {
display:flex;
flex-wrap:wrap;
gap:1em;
}
<div class style="--bg:url(https://picsum.photos/id/59/200/200)" >
<img src=https://picsum.photos/id/59/200/200 >
</div>
<div class style="--bg:url(https://picsum.photos/id/58/200/200)" >
<img src=https://picsum.photos/id/58/200/200 >
</div>
<div class style="--bg:url(https://picsum.photos/id/57/200/200)" >
<img src=https://picsum.photos/id/57/200/200 >
</div>
Related
I'm new to React. I have this image ("c-tile-img") inside a div ("c-tile-holder") and what I want to do is when I hover over the div or the image element I want to translate on Y-axis slightly like a hover effect. I used React useState hook to achieve this but when I run it nothing is triggered. Here is what I've so far...
**
Tile.jsx
**
const Tile = () => {
const[isMousedOver, setMouseOver] = useState(false);
function handleMouseOver() {
setMouseOver(true);
}
function handleMouseOut() {
setMouseOver(false);
}
return (
<React.Fragment>
<div className="c-tiles">
<a href="/work/help-scout/" className="c-tile c-tile-hs" aria-label="Help Scout Case Study"
style={{translate: isMousedOver ? '50': '0'}}
onMouseOut={handleMouseOut}
onMouseOver={handleMouseOver}>
<span className="c-tile-category">Mobile</span>
<h2 className="c-tile-title">Help Scout</h2>
<div className="c-tile-holder">
<img className="c-tile-img c-tile-img-hs lazy loaded" alt="Help Scout" aria-label="Help Scout image" data-ll-status="loaded"
src={headshot}/>
</div>
</a>
My CSS File
Tile.css
.c-tile-holder {
position: relative;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
.c-tile-img-hs {
max-width: 80%;
}
.c-tile-img {
position: relative;
transition: all .4s ease-in-out;
max-width: 100%;
display: inline-block;
}
img {
vertical-align: middle;
}
img {
border-style: none;
}
what is the best practice to show/hide the side menu with animation? The way I implement works fine but I can't implement the animation. I also shared images so everyone can have some idea.
The answer might be easy but I couldn't fully understand the toggle class efficiently. If I would I should be able to implement transition just by changing the width from the same classname.
Also I am getting this error on console: Received false for a non-boolean attribute className.
React code ;
const handleSize = () => {
setOpen(!open); }; return (
<div
className={"sideBar" + `${open ? " sideBar__show" : " sideBar__hide"}`}
>
<div className="sideBar__header">
<div className="menu_buttons" onClick={handleSize}>
<MenuIcon className="sideBar_icon" />
<p className={!open && "sideBar_hide__content"}>Menu</p>
</div>
</div>
<hr className="sideBar__divider" />
<div className="sideBar__content">
{sideBarContent.map((item) => {
return (
<div className="menu_buttons" key={item.name}>
<item.icon />
<p className={!open && "sideBar_hide__content"}>{item.name}</p>
</div>
);
})}
</div>
<hr className="sideBar__divider" />
<div className="sideBar__footer">
<Avatar>{firstLetter}</Avatar>
<p className={!open && "sideBar_hide__content"}>{adminName}</p>
</div>
</div> ); };
CSS;
.sideBar {
position: fixed;
left: var(--sidebar-left-margin);
height: max-content;
top: calc(var(--header-height) + 10px);
bottom: 10px;
border-radius: 10px;
background-color: var(--second-color);
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 5px;
border: 1px solid var(--main-color);
/* transition: all ease-in 1s; */
}
.sideBar__show {
width: var(--sidebarOpen-width);
}
.sideBar_hide {
width: var(--sidebarClose-width);
}
.sideBar_hide__content {
display: none;
}
Not sure what is best practice, this is my currently approach:
const handleSize = () => setOpen(!open);
const sideBarClasses = open ? "sideBar sideBar_show : "sideBar sideBar_hide;
<div className="sideBar__header">
<div className={sideBarClasses}>
I want to show items as flex but still it is showing like a column. What am I doing wrong here?
This is my component :
import React from "react";
import { Link } from "react-router-dom";
import { useSelector } from "react-redux";
import "./Listing.css";
const ProductComponent = () => {
const products = useSelector((state) => state.allProducts.products);
const renderList = products.map((product) => {
const { id, title, image, price, category } = product;
return (
<div className="container">
<div key={id} className="item-box" >
<Link to={`/product/${id}`}>
<div className="image-box">
<img src={image} alt={title} />
</div>
<div className="detail">
<div >{title}</div>
<div >$ {price}</div>
<div >{category}</div>
</div>
</Link>
</div>
</div>
);
});
return <>{renderList}</>;
};
export default ProductComponent;
This is the css file of this component:
.container{
width: 100%;
height: 90vh;
flex-wrap: wrap;
display: flex;
}
.item-box{
border: 2px solid #000;
display: flex;
height: auto;
width: 380px;
padding: 10px;
justify-content: center;
margin: 20px;
}
img{
height: auto;
width: 300px;
}
And finally this is my App.css:
* {
font-family: "Roboto", sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
Thanks in advance.
I wanna show the items as flex (from left to right) but it is like a column though I defined "display:flex"
You are looping through the array and outputing multiple containers. Each container is display-flex but the problem is that they all have only one child. Move the map inside the container:
return (
<div className="container">
{ products.map((product) => {
const { id, title, image, price, category } = product;
return (
<div key={id} className="item-box" >
<Link to={`/product/${id}`}>
<div className="image-box">
<img src={image} alt={title} />
</div>
<div className="detail">
<div >{title}</div>
<div >$ {price}</div>
<div >{category}</div>
</div>
</Link>
</div>
)
})}
</div>
)
In the style of .container just add flex-direction:coloum
.container{
width: 100%;
height: 90vh;
display: flex;
flex-direction: column;
}
If you want the column in center, then you can append justify-content:center & align-items:center as well.
I have created an image carousel with an active image in the middle and all the images on the side and trying to show the active image on the side by adding a border around the image.
The border is being shown initially, but I am unable to see it after clicking on other images.
ImageDisplay.js:
import React,{useState} from 'react';
import {SideBySideMagnifier} from 'react-image-magnifiers';
import '../CSS/imagedisplay.css';
function ImageDisplay({product}) {
const image = typeof(product.images) ==='object' ? product.images[0].props.src: product.images;
const [current,setCurrent] = useState(image);
const handleClick = (e) =>{
setCurrent(e.target.src);
}
return (
<div className='carousel'>
<div className='images'>
{typeof (product.images)==='object' ? product.images.map( (item,idx) =>
(
<div key={idx.toString()} className='small-images' onClick={handleClick}>
<img className={item.props.src===current ? 'selected': ' '} src= {item.props.src} alt=''/>
</div>
)
) :
( <div className='small-images'><img src={product.images} alt={product.name}/></div>)}
</div>
<div className='container'>
<SideBySideMagnifier className='magnifier' alwaysInPlace={true} imageSrc={current} imageAlt='present' largeImageSrc={current}/>
</div>
</div>
)
}
export default ImageDisplay;
CSS:
.carousel{
display:flex;
}
.images{
height:100vh;
overflow: scroll;
}
.small-images img {
width:5vw;
height:5vw;
object-fit:contain;
margin:20px 20px 20px 0;
display:block;
cursor:pointer;
}
/* .magnifier{
height: 80%;
} */
.magnifier > div {
display: flex;
height:80%;
}
.magnifier>div>img {
max-height: 500px;
max-width: 600px;
margin: 100px;
width: auto !important;
object-fit:contain; /* should be removed from inline styles */
}
.selected{
border:1px solid #F26241;
}
Can anybody help me on this?
here the demo: https://stackblitz.com/edit/react-i8c9en
I would the two text to be on the same baseline. I have tried to play with vertical-align and other properties and so far I fail to achieve a same-baseline's rendering.
class App extends React.Component {
render() {
return (
<div className="component">
<h3
className="text_a"
>
textA{" "}
<span className="text_b">
textB
</span>
</h3>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
.component {
text-align: center;
padding: 50px;
}
.text_a {
font-size: 5em;
}
.text_b {
/* width:100%; */
float: right;
/* position:absolute; */
right: 3vw;
/* margin-right:5vw; */
/* margin-top:7.5vh; */
/* position:relative; */
/* float:right;
clear:both; */
/* padding-right:10vw; */
/* vertical-align:middle; */
font-size: 0.60em;
color: rgb(54, 0, 18);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
You could use flex and align items to the baseline.
.text_a{
display: flex;
align-items: baseline;
font-size:5em;
}
vertical-align doesn't work on block style elements. Here's additional information on that: https://christopheraue.net/design/vertical-align
Edit:
Taking another look at your code, these elements should have been aligned to the baseline with their default styles. You can still use flex, but just removing the float would work too.
.text_a {
font-size: 5em;
}
.text_b {
font-size: 0.60em;
color: rgb(54, 0, 18);
}
add css property line-height to text_b
.text_b {
line-height: 110px; /* adjust according to your need */
}
reference:
https://www.w3schools.com/cssref/pr_dim_line-height.asp
try this
text_a{
position:relative
}
text_b{
position: absolute;
bottom: 10px; //make it responsive i've just hard coded or else you can leave as it if it works
}
because h3 has some default styling so it becomes tedious to overwrite it
Remove the float from .text_b and give it a margin-left: 3vw:
class App extends React.Component {
render() {
return (
<div className="component">
<h3 className="text_a">
textA{" "}
<span className="text_b">
textB
</span>
</h3>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
.component {
text-align: center;
padding: 50px;
}
.text_a {
font-size: 5em;
}
.text_b {
margin-left: 3vw;
font-size: 0.60em;
color: rgb(54, 0, 18);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
My solution: using a container with flex's displaying -thanks to sallf for the idea-, then align all the items on baseline, then use flex-basis to distribute the space between the items, hence allowing to maintain my textB on the right's edge of the screen.
Demo here: https://stackblitz.com/edit/react-ypdmxu
ReactJS's snippet:
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
class App extends Component {
render() {
return (
<div className="component">
<h3
className="text_container"
>
<span className="text_a">
textA {" "}
</span>
<span className="text_b">
textB
</span>
</h3>
</div>
);
}
}
render(<App />, document.getElementById('root'));
CSS' snippet:
.component{
padding:50px;
}
.text_container{
display: flex;
align-items: baseline;
font-size:5em;
}
.text_a{
flex-basis: 95%;
}
.text_b{
font-size:0.60em;
color:rgb(54, 0, 18);
}