css collection

project link: http://chuanshuoge1-css.surge.sh/

app.js

import React, { Component } from 'react';
import './App.css';

import 'antd/dist/antd.css';
import { Card, Row, Col } from 'antd';

import banner from './img/banner.png';
import horizontalScroll from './img/horizontalScroll.png';
import parallax from './img/parallax.png';
import sticky from './img/sticky.png'
import cube from './img/3d.png'

class App extends Component {
  render() {
      return (
          <Row gutter={8}>
              <Col xs={24} sm={12} lg={8} xl={6} >
                  <Card title={<a href='https://chuanshuoge2.blogspot.com/2018/02/css-3d.html'>3D</a>} style={{ width: 300, height: 350 }}>
                      <img src={cube} style={{ width: '100%' }}></img>
                  </Card>
              </Col>
              <Col xs={24} sm={12} lg={8} xl={6}>
                  <Card title={<a href='https://chuanshuoge2.blogspot.com/2018/03/css-parallax_30.html'>Parallax</a>} style={{ width: 300, height: 350 }}>
                      <img src={parallax} style={{ width: '100%', marginTop: 50 }}></img>
                  </Card>
              </Col>
              <Col xs={24} sm={12} lg={8} xl={6}>
                  <Card title={<a href='https://chuanshuoge2.blogspot.com/2018/01/sliding-banner-html-css-jquery.html'>Sliding Banner</a>} style={{ width: 300, height: 350 }}>
                      <img src={banner} style={{width:'100%'}}></img>
                  </Card>
              </Col>
              <Col xs={24} sm={12} lg={8} xl={6} >
                  <Card title={<a href='https://chuanshuoge2.blogspot.com/2018/03/css-sticky-header.html'>Parallax</a>} style={{ width: 300, height: 350 }}>
                      <img src={sticky} style={{ width: '100%' }}></img>
                  </Card>
              </Col>
              <Col xs={24} sm={12} lg={8} xl={6}>
                  <Card title={<a href='https://chuanshuoge2.blogspot.com/2018/04/css-scroll-snap.html'>Horizontal Scroll</a>} style={{ width: 300, height: 350 }}>
                      <img src={horizontalScroll} style={{ width: '100%', marginTop: 50 }}></img>
                  </Card>
              </Col>         
          </Row>
    );
  }
}

export default App;

reference:
https://chuanshuoge2.blogspot.com/2017/06/css-image-animation.html