I am developing my web portfolio and wanted to add background in each card (wallpaper of the location) and it changes according to each tile. I'm using react to develop the project and below is the Experience.js and App.css which I have designed as of yet. This is the current look of the timeline: Current implementation

App.css
/************ Experience Css ************/
.experience {
  padding: 0 0 50px 0;
  position: relative;
}
.experience-bx {
  background: #151515;
  border-radius: 75px;
  text-align: center;
  padding: 50px 50px;
  margin-top: 10px;
}
.experience h2 {
  color: #ffffff;
    font-size: 45px;
    font-weight: 700;
}
.experience p {
    color: #B8B8B8;
    color: #B8B8B8;
    font-size: 18px;
    letter-spacing: 0.8px;
    line-height: 1.5em;
    margin: 14px 0 75px 0;
}

@keyframes updown {
    0% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(-20px);
    }
}
.txt-rotate > .wrap {
  border-right: 0.08em solid #666;
}

Experience.js

import React from "react";
import { Chrono } from "react-chrono";
import 'animate.css';
import ithena from "../assets/img/ithena.png";

export const Experience =() => {
  const items = [{
      title: "Apr 2019 - Jun 2019",
      cardTitle: "Student Intern",
      cardSubtitle:"Dunkirk",
      cardDetailedText: "Men of the British Expeditionary Force (BEF) wade out to..",
      
    },
    {
      title: "Jun 2020 - Aug 2020",
      cardTitle: "Full Stack Developer Intern",
      cardSubtitle:"Dunkirk",
      cardDetailedText: "Men of the British Expeditionary Force (BEF) wade out to..",
      
    },
    {
      title: "Aug 2021 - Present",
      cardTitle: "Student Assistant",
      cardSubtitle:"Dunkirk",
      cardDetailedText: "Men of the British Expeditionary Force (BEF) wade out to..",
      
    },
    {
      title: "Aug 2022 - Present",
      cardTitle: "Internal Secretary",
      cardSubtitle:"Dunkirk",
      cardDetailedText: "Men of the British Expeditionary Force (BEF) wade out to..",
      
    },
  ];
  return (
    <section className="experience" id="experiences">
        <div className="container">
            <div className="row">
                <div className="col-12">
                    <div className="experience-bx wow zoomIn">
                         <h2>{`Experience`}</h2>
                          <div style={{ width: '100%', height: 'auto' }}>
                            <Chrono items={items} mode="HORIZONTAL" cardPositionHorizontal="TOP"
                            theme={{
                              cardBgColor: '#151515',
                              cardForeColor: 'violet',
                              titleColor: '#B8B8B8',
                              titleColorActive: 'white',
                              secondary: 'linear-gradient(90.21deg, rgba(162, 96, 192, 0.5) -5.91%, rgba(55, 34, 146, 0.5) 111.58%)',
                              primary: '#7f4a97',
                              
                            }}
                            cardHeight={250}
                            slideItemDuration={5000}
                            slideShow={true}
                            itemWidth={"300"}
                            borderLessCards={true}
                            buttonTexts={{
                              first: 'Jump to First',
                              last: 'Jump to Last',
                              next: 'Next',
                              previous: 'Previous',
                            }}
                            fontSizes={{
                              cardSubtitle: '1rem',
                              cardText: '1rem',
                              cardTitle: '1.5rem',
                              title: '1rem',
                            }}
                            />
                            
                          </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
  )
}

I have tried using https://www.npmjs.com/package/react-chrono features and want the final output to look something like this: Example of timeline what I want part 1 Example of timeline what I want part 2 Maybe have translucent image over the item.

CodePudding user response：

Why don't you pass the image to react-chrono such as:

{
  title: "Jun 2020 - Aug 2020",
  cardTitle: "Full Stack Developer Intern",
  cardSubtitle:"Dunkirk",
  cardDetailedText: "Men of the British Expeditionary Force (BEF) wade out to..",
  media: {
    name: "dunkirk beach",
    source: {
      url: "http://someurl/image.jpg"
    },
    type: "IMAGE"
  }
}

and then adjust it with style to take over the whole width/height?

another option with react-chrono would be to use customised cards. you can build your own item, and pass with it the items array only for the timeline points. like so you can give the other elements of the item a position that will put them on top. (for example, image gets position absolute taking all the card, and other items with higher z-index on top of the image)

see:

<Chrono mode="HORIZONTAL" items={items}>
  <div>
    <p>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum</p>
  </div>
  <div>
    <img src="<url to  a nice image" />
  </div>
</Chrono>;