JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<div class="main_image"></div>
<div class="image123">
    <div class="imgContainer">
        <img class="bottom" src="https://a.disquscdn.com/get?url=http%3A%2F%2Fsushiyamaonline.com%2Fwp-content%2Fuploads%2Fsites%2F21%2F2014%2F10%2FLobster-for-Menu-Page.jpg&key=NLtMbcuyvf1mqgFAvd8fxQ"/>
        <img class="top" src="http://www.authenticmainelobster.com/images/lobster.gif"/>
        <p>This is image 1</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="https://a.disquscdn.com/get?url=http%3A%2F%2Fsushiyamaonline.com%2Fwp-content%2Fuploads%2Fsites%2F21%2F2014%2F10%2FLobster-for-Menu-Page.jpg&key=NLtMbcuyvf1mqgFAvd8fxQ"/>
        <img class="top" src="http://www.authenticmainelobster.com/images/lobster.gif"/>
        <p>This is image 2</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="https://a.disquscdn.com/get?url=http%3A%2F%2Fsushiyamaonline.com%2Fwp-content%2Fuploads%2Fsites%2F21%2F2014%2F10%2FLobster-for-Menu-Page.jpg&key=NLtMbcuyvf1mqgFAvd8fxQ"/>
        <img class="top" src="http://www.authenticmainelobster.com/images/lobster.gif"/>
        <p>This is image 3</p>
    </div>
    <div class="imgContainer">
        <img class="bottom" src="https://a.disquscdn.com/get?url=http%3A%2F%2Fsushiyamaonline.com%2Fwp-content%2Fuploads%2Fsites%2F21%2F2014%2F10%2FLobster-for-Menu-Page.jpg&key=NLtMbcuyvf1mqgFAvd8fxQ"/>
        <img class="top" src="http://www.authenticmainelobster.com/images/lobster.gif">
        <p>This is image 4</p>
    </div>
</div>
<div class="image123">
    <div class="imgContainer">
        <img class="bottom" src="https://a.disquscdn.com/get?url=http%3A%2F%2Fsushiyamaonline.com%2Fwp-content%2Fuploads%2Fsites%2F21%2F2014%2F10%2FLobster-for-Menu-Page.jpg&key=NLtMbcuyvf1mqgFAvd8fxQ"/>
        <img class="top" src="http://www.authenticmainelobster.com/images/lobster.gif"/>
        <p>This is...

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #360836;
    text-align:center;
}

li {
    display:inline;
}

li a {
    display: inline-block;
    color: #d14977;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

li a:hover {
    color: white;
}

div.main_image { 
content:url(../Image/everest.jpg);
    max-width: 100%;
    height: auto;
    width: auto\9;
}

.imgContainer{
    float:left;
    width:25%;
    position:relative;
    margin:0 auto;

}

.imgContainer img{
    display: block;
    max-width:100%;
    height: auto;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.imgContainer img.top {
    position:absolute;
    left:0;
    top:0;
}

.imgContainer p {
    position: absolute;
    pointer-events: none;
    margin: 0;
    
    /* Vertical centering */
    top: 50%;
    transform: translateY(-50%);
}

.imgContainer img.top:hover {
      opacity:0;
}