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>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<section class="content-item" id="gallery">
<div class="container">
<div class="content-headline">
<h2>Image gallery</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
<div class="row">
<div class="overlay-wrapper col-xs-6 col-sm-3">
<img src="https://www.bootdey.com/image/350x300/DDA0DD/000000" class="img-responsive" alt=""/>
<span class="overlay">
<a href="#assets/images/image_01.JPG" class="show-image"><i class="fa fa-plus"></i></a>
<a href="#/" class=""><i class="fa fa-link"></i></a>
</span>
</div>
<div class="overlay-wrapper col-xs-6 col-sm-3">
<img src="https://www.bootdey.com/image/350x300/000080/000000" class="img-responsive" alt=""/>
<span class="overlay">
<a href="#assets/images/image_02.JPG" class="show-image"><i class="fa fa-plus"></i></a>
<a href="#/" class=""><i class="fa fa-link"></i></a>
</span>
</div>
<div class="overlay-wrapper col-xs-6 col-sm-3">
<img src="https://www.bootdey.com/image/350x300/EEE8AA/000000" class="img-responsive" alt=""/>
<span class="overlay">
<a href="#assets/images/image_03.JPG" class="show-image"><i class="fa fa-plus"></i></a>
<a href="#/" class=""><i class="fa fa-link"></i></a>
</span>
</div>
<div class="overlay-wrapper col-xs-6 col-sm-3">
<img src="https://www.bootdey.com/image/350x300/FFDAB9/000000" class="img-responsive" alt=""/>
<span class="overlay">
<a href="#assets/images/image_04.JPG" class="show-image"><i class="fa fa-plus"></i></a>
<a href="#/" class=""><i class="fa fa-link"></i></a>
</span>
</div>
<div class="overlay-wrapper col-xs-6 col-sm-3">
<img src="https://www.bootdey.com/image/350x300/AFEEEE/000000" class="img-responsive" alt=""/>
<span class="overlay">
<a href="#assets/images/image_05.JPG" class="show-image"><i class="fa fa-plus"></i></a>
<a href="#/" class=""><i class="fa fa-link"></i></a>
</span>
</div>
<div class="overlay-wrapper col-xs-6 col-sm-3">
<img src="https://www.bootdey.com/image/350x300/98FB98/000000" class="img-responsive" alt=""/>
<span class="overlay">
<a href="#assets/images/image_06.JPG" class="show-image"><i class="fa fa-plus"></i></a>
<a href="#/" class=""><i class="fa fa-link"></i></a>
</span>
</div>
<div class="overlay-wrapper col-xs-6 col-sm-3">
<img src="https://www.bootdey.com/image/350x300/DDA0DD/000000" class="img-responsive" alt=""/>
<span class="overlay">
<a href="#assets/images/image_07.JPG" class="show-image"><i class="fa fa-plus"></i></a>
<a href="#/" class=""><i class="fa fa-link"></i></a>
</span>
</div>
<div class="overlay-wrapper col-xs-6 col-sm-3">
<img src="https://www.bootdey.com/image/350x300/663399/000000" class="img-responsive" alt=""/>
<span class="overlay">
<a href="#assets/images/image_08.JPG" class="show-image"><i class="fa fa-plus"></i></a>
<a href="#/" class=""><i class="fa fa-link"></i></a>
</span>
</div>
</div>
</div>
</section>
</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;}
/*----------------------------*/
.content-item {
padding:30px 0;
background-color:#FFFFFF;
}
.content-item.grey {
background-color:#F0F0F0;
padding:50px 0;
height:100%;
}
.content-item h2 {
font-weight:700;
font-size:35px;
line-height:45px;
text-transform:uppercase;
margin:20px 0;
}
.content-item h3 {
font-weight:400;
font-size:20px;
color:#555555;
margin:10px 0 15px;
padding:0;
}
.content-headline {
height:1px;
text-align:center;
margin:20px 0 70px;
}
.content-headline h2 {
background-color:#FFFFFF;
display:inline-block;
margin:-20px auto 0;
padding:0 20px;
}
.grey .content-headline h2 {
background-color:#F0F0F0;
}
.content-headline h3 {
font-size:14px;
color:#AAAAAA;
display:block;
}
#gallery .row {
margin:0;
}
#gallery .row > div {
padding:0;
}
#gallery .overlay-wrapper:hover .overlay {
background-color:rgba(0,0,0,0.7);
}
#gallery-item h2 {
font-size:28px;
margin-top:0;
}
#gallery-item img {
background-color:#FFFFFF;
border:3px solid #999999;
padding:7px;
}
.overlay-wrapper {
position:relative;
}
.overlay-wrapper .overlay {
bottom:0;
left:0;
opacity:0;
overflow:hidden;
position:absolute;
right:0;
top:0;
text-align:center;
padding-top:25%;
transition:all 0.4s ease;
}
.overlay-wrapper .overlay a {
font-size:20px;
width:50px;
height:50px;
color:#FFFFFF;
display:inline-block;
text-align:center;
padding-top:12px;
border-radius:50%;
margin-right:15px;
opacity:0.8;
}
.overlay-wrapper .overlay a:last-child {
margin-right:0;
}
.overlay-wrapper .overlay a:hover {
background-color:#333333;
color:#FFFFFF;
}
.overlay-wrapper:hover .overlay {
background-color:rgba(0,0,0,0.5);
opacity:1;
}
