1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<a href="#/" class="gallery-popup" title="Open Imagination">
<div class="project-item">
<div class="overlay-container">
<img src="https://www.bootdey.com/image/350x180/87CEFA/000000" alt="img" class="gallery-thumb-img"/>
<div class="project-item-overlay">
<h4>Open Imagination</h4>
<p>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="thumb-sm rounded-circle"/>
<span class="ml-2">Curtis Marion</span>
</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#/" class="gallery-popup" title="Locked Steel Gate">
<div class="project-item">
<div class="overlay-container">
<img src="https://www.bootdey.com/image/350x180/008B8B/000000" alt="img" class="gallery-thumb-img"/>
<div class="project-item-overlay">
<h4>Locked Steel Gate</h4>
<p>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="thumb-sm rounded-circle"/>
<span class="ml-2">Curtis Marion</span>
</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#/" class="gallery-popup" title="Mac Sunglasses">
<div class="project-item">
<div class="overlay-container">
<img src="https://www.bootdey.com/image/350x180/9932CC/000000" alt="img" class="gallery-thumb-img"/>
<div class="project-item-overlay">
<h4>Mac Sunglasses</h4>
<p>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="thumb-sm rounded-circle"/>
<span class="ml-2">Curtis Marion</span>
</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#/" class="gallery-popup" title="Morning Dew">
<div class="project-item">
<div class="overlay-container">
<img src="https://www.bootdey.com/image/350x180/1E90FF/000000" alt="img" class="gallery-thumb-img"/>
<div class="project-item-overlay">
<h4>Morning Dew</h4>
<p>
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="user" class="thumb-sm rounded-circle"/>
<span class="ml-2">Curtis Marion</span>
</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#/" class="gallery-popup" title="Console Activity">
<div class="project-item">
<div class="overlay-container">
<img src="https://www.bootdey.com/image/350x180/FF69B4/000000" alt="img" class="gallery-thumb-img"/>
<div class="project-item-overlay">
<h4>Console Activity</h4>
<p>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="user" class="thumb-sm rounded-circle"/>
<span class="ml-2">Curtis Marion</span>
</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#/" class="gallery-popup" title="Shake It!">
<div class="project-item">
<div class="overlay-container">
<img src="https://www.bootdey.com/image/350x180/87CEFA/000000" alt="img" class="gallery-thumb-img"/>
<div class="project-item-overlay">
<h4>Shake It!</h4>
<p>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="thumb-sm rounded-circle"/>
<span class="ml-2">Curtis Marion</span>
</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#/" class="gallery-popup" title="Backpack Content">
<div class="project-item">
<div class="overlay-container">
<img src="https://www.bootdey.com/image/350x180/D3D3D3/000000" alt="img" class="gallery-thumb-img"/>
<div class="project-item-overlay">
<h4>Backpack Content</h4>
<p>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="thumb-sm rounded-circle"/>
<span class="ml-2">Curtis Marion</span>
</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#/" class="gallery-popup" title="Sunset Bulb Glow">
<div class="project-item">
<div class="overlay-container">
<img src="https://www.bootdey.com/image/350x180/90EE90/000000" alt="img" class="gallery-thumb-img"/>
<div class="project-item-overlay">
<h4>Sunset Bulb Glow</h4>
<p>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="thumb-sm rounded-circle"/>
<span class="ml-2">Curtis Marion</span>
</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#/" class="gallery-popup" title="Open Imagination">
<div class="project-item">
<div class="overlay-container">
<img src="https://www.bootdey.com/image/350x180/87CEFA/000000" alt="img" class="gallery-thumb-img"/>
<div class="project-item-overlay">
<h4>Open Imagination</h4>
<p>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="thumb-sm rounded-circle"/>
<span class="ml-2">Curtis Marion</span>
</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#/" class="gallery-popup" title="Console Activity">
<div class="project-item">
<div class="overlay-container">
<img src="https://www.bootdey.com/image/350x180/20B2AA/000000" alt="img" class="gallery-thumb-img"/>
<div class="project-item-overlay">
<h4>Console Activity</h4>
<p>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="user" class="thumb-sm rounded-circle"/>
<span class="ml-2">Curtis Marion</span>
</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#/" class="gallery-popup" title="Open Imagination">
<div class="project-item">
<div class="overlay-container">
<img src="https://www.bootdey.com/image/350x180/87CEFA/000000" alt="img" class="gallery-thumb-img"/>
<div class="project-item-overlay">
<h4>Open Imagination</h4>
<p>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="thumb-sm rounded-circle"/>
<span class="ml-2">Curtis Marion</span>
</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#/" class="gallery-popup" title="Shake It!">
<div class="project-item">
<div class="overlay-container">
<img src="https://www.bootdey.com/image/350x180/B0C4DE/000000" alt="img" class="gallery-thumb-img"/>
<div class="project-item-overlay">
<h4>Shake It!</h4>
<p>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="user" class="thumb-sm rounded-circle"/>
<span class="ml-2">Curtis Marion</span>
</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{margin-top:20px;background:#FCFCFC}
/* =============
Gallery
============= */
.overlay-container {
position: relative;
}
.project-item img.gallery-thumb-img {
display: block;
width: 100%;
height: auto;
border-radius: 5px;
margin-bottom: 10px;
margin-top: 10px;
}
.project-item-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
border-radius: 5px;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
transition: .5s ease;
}
.project-item-overlay h4 {
font-size: 18px;
font-weight: 500;
white-space: nowrap;
color: white;
position: absolute;
overflow: hidden;
top: 7%;
left: 7%;
margin: 0;
text-overflow: ellipsis;
}
.project-item-overlay p {
font-size: 15px;
font-weight: 600;
white-space: nowrap;
color: white;
position: absolute;
overflow: hidden;
bottom: 7%;
left: 7%;
text-overflow: ellipsis;
margin: 0;
}
.overlay-container:hover .project-item-overlay {
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
height: 100%;
width: 100%;
transition: .5s ease;
}
.thumb-sm {
height: 32px;
width: 32px;
}
.rounded-circle {
border-radius: 50%;
}
