andrzejewsky

.item:hover {
  transform: scale(1.5) !important;
}

andrzejewsky

.item:hover ~ .item {
   transform: translateX(25%);
}

andrzejewsky

.container:hover .item {
   transform: translateX(-25%);
}

andrzejewsky

.container {
  display: flex;
  padding: 0 55px;
}

.item {
  background: green;
  flex: 0 0 19.7%;
  text-align: center;
  margin: 0 2px;

andrzejewsky

  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>

andrzejewsky

import React, { Component } from "react";

class ImageResource extends Component {
  constructor(props) {
    super(props);

    const image = new Image();
    image.onload = this.handleLoadImage;

    this.state = { image, src: props.lowQuality };

andrzejewsky

const calcDuration = duration => {
  const totalMinutes = duration / 60;
  const minutes = ~~totalMinutes;
  const seconds = ~~((totalMinutes - minutes) * 100);

  return `${minutes}m ${seconds}s`;
};

export default calcDuration;

andrzejewsky

import List from "./List";
import Item from "./Item";

List.Item = Item;

export default List;

andrzejewsky

import React from "react";
import ListContext from "./context";
import "./Item.css";

const Item = ({ id, icon, className, info, children }) => (
  <ListContext.Consumer>
    {value => (
      <button
        className={["item", className].join(" ")}
        key={id}

andrzejewsky

import React, { Component } from "react";
import ListContext from "./context";
import "./List.css";

class List extends Component {
  state = {
    selectedItem: null
  };

  handleSelectItem = selectedItem => {