Looking to create a basic website with React using Reactstrap and Bootstrap. I'm trying to add a custom border-radius to my Cards, but facing an issue where the image inside the Card is overlapping the container on the upper side. Is there a CSS property that can help in smoothing out the image border? How would you tackle this problem?
Component:
import React, { Component } from 'react';
import './App.css';
import logo from '../images/logo.png';
import tile1 from '../images/tile_imgs/prova(m).png';
import tile2 from '../images/tile_imgs/prova(d).png';
import tile3 from '../images/tile_imgs/prova(x).png';
import { Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button, Col, Row, Container } from 'reactstrap';
import PropTypes from 'prop-types';
class App extends Component {
render() {
return (
<div>
<div className="App">
<br/>
<img src={logo} />
</div>
<br/>
<br/>
<br/>
<Container className="prova" fluid="true">
<Row>
<Col className="frame" xs="12" sm="4">
<Card className="card">
<CardImg className="cards" src={tile1} />
<CardBody>
<CardTitle> Recruitment Services</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button>Discover More!</Button>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
<Card>
<CardImg className="cards" src={tile2} alt="Card image cap" />
<CardBody>
<CardTitle>Web Design and Web-mastering</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button>Discover More!</Button>
</CardBody>
</Card>
</Col>
<Col xs="6" sm="4">
<Card>
<CardImg className="cards" src={tile3} alt="Card image cap" />
<CardBody>
<CardTitle>Digital Marketing</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button>Discover More!</Button>
</CardBody>
</Card>
</Col>
</Row>
</Container>
<br/>
<br/>
</div>
);
}
}
export default App;
CSS
.App {
text-align: center;
background-image:
url('../images/arch1.jpg'), /*put the first one on the Top*/
url('../images/computer.jpg'),
url('../images/arch2.jpg');
animation: animatedBird 30s infinite;
height: 26rem;
}
@keyframes animatedBird {
0% {
background-image: url('../images/arch1.jpg');
}
10% {
background-image: url('../images/arch1.jpg');
}
25% {
background-image: url('../images/computer.jpg');
}
35% {
background-image: url('../images/computer.jpg');
}
50% {
background-image: url('../images/arch2.jpg');
}
60% {
background-image: url('../images/arch2.jpg');
}
75% {
background-image: url('../images/computer.jpg');
}
100% {
background-image: url('../images/arch1.jpg');
}
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
#navbar {
height: 150px;
}
.cards {
max-height: 200px;
width: auto;
height: auto;
}
.prova {
max-width: 80%;
}
.card {
width: 24rem;
height: 26rem;
text-align: center;
border-radius: 34px !important;
}
.frame {
border-radius: 34% !important;
}