Iam using bootstrap styling and i want to get the image with full screen when I click on the image.
this is the code .
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src={images} style={{marginLeft:10,marginTop:20, width: '15rem',height: '15rem' }}/>
<Card.Body>
<Card.Title>{name}</Card.Title>
</Card.Body>
<ListGroup className="list-group-flush">
<ListGroup.Item>{number}</ListGroup.Item>
<ListGroup.Item>{type}</ListGroup.Item>
</ListGroup>
<Card.Body>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
To display the image in full-screen mode when the user clicks on it, you can use the Bootstrap Modal component.
import { useState } from 'react';
import { Card, Button, Modal } from 'react-bootstrap';
function ImageCard({ name, number, type, image }) {
const [showModal, setShowModal] = useState(false);
const handleModalShow = () => setShowModal(true);
const handleModalClose = () => setShowModal(false);
return (
<>
<Card style={{ width: '18rem' }}>
<Card.Img
variant="top"
src={image}
style={{ marginLeft: 10, marginTop: 20, width: '15rem', height: '15rem' }}
onClick={handleModalShow}
/>
<Card.Body>
<Card.Title>{name}</Card.Title>
</Card.Body>
<ListGroup className="list-group-flush">
<ListGroup.Item>{number}</ListGroup.Item>
<ListGroup.Item>{type}</ListGroup.Item>
</ListGroup>
<Card.Body>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Modal show={showModal} onHide={handleModalClose} size="lg">
<Modal.Header closeButton></Modal.Header>
<Modal.Body>
<img src={image} alt={name} style={{ width: '100%', height: 'auto' }} />
</Modal.Body>
</Modal>
</>
);
}