Mouse effect for banners

Question

I am doing an exercise. This is my interface. Now I want a mouse effect for two banners on the left:

When we move mouse on each banner, that banner will be replaced by a text box with same size, green background (without affecting the other banner) as following.

I know we can do this effect somehow with javascript, but since i am learning html, javascript is not easy for me, could you guys please help me as an example? This is my code:

#parent {
    overflow: hidden;
    margin:0px;
}

.right {
    border-left: 2px solid;
    border-color: rgb(215,217,216);
    padding-left: 20px;
    float: right;
    width: 270px;
}
.left {
    margin: 0px;
    overflow: hidden;
    height: 100%;
}

body {
    margin:0px;
    font-family: Calibri;
}

header20 {
    font-size: 16pt;
}

#inner {	
    margin-left: 10px;
    width:730px;
    margin: 0 auto;
}

.row {
    display: flex; /* equal height of the children */
}

<div id="parent" class="row">
    <div class="right">
        <br>
        <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'>
        <br><br>
        <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'>
        <br><br>
        <table style='width:250px;background-color:rgb(211,238,208)'>
        <tr>
            <td>
            <header20><span style='color:rgb(17,56,96)'><b>This is the first table</b></span></header20>
            <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
                <li>First point</li>
                <li>Second point</li>
                <li>Third point</li>
            </ul>
            </td>
        </tr>
        </table>
        <br>
        <table style='width:250px;background-color:rgb(211,238,208)'>
        <tr>
            <td>
            <header20><span style='color:rgb(17,56,96)'><b>This is the second table</b></span></header20>
            <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
                <li>First point</li>
                <li>Second point</li>
                <li>Third point</li>
            </ul>
            </td>
        </tr>
        </table>
        <br>
    </div>

    <div class="left">
        <div id="inner">
            <br>
            <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'>
            <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page -  bla bla bla <br>Timetable for the next month</b></p> 
            <p style='margin-left:1cm'> The first line of the content</p>
            <p style='margin-left:1cm'> The second line of the content</p>
            <p style='margin-left:1cm'> The third line of the content</p>
            <br>
        </div>			
			
        <table align='center'>
        <tr>
            <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td>
            <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td>
            <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td>
        </tr>
        </table>
    </div>
</div>

Answer 1

I've made a JSBin for you which shows how to solve this. The solution only requires CSS and no JavaScript! You can see it here:

https://jsbin.com/hecesusiwu/1/edit?html,css,output

Here are the steps to solve:

• Wrap image in a div
• Add another div with text in it
• Hide the inner div
• Show the innter div on hover

Answer 2

Since this is an exercise I'm just going to give you a little tip: Wrap the Banner and a hidden Text box. When hovering the wrapper you simply hide the Banner and show the Textbox.

If you're too lazy to try it out, here a simple solution:

.switcher {
  width: 250px;
  height: 50px;
}
.switcher > img {
  display: block;
}
.switcher:hover > img {
  display: none;
}
.switcher > .switch-text {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgb(211, 238, 208);
}
.switcher:hover > .switch-text {
  display: block;
}
#parent {
  overflow: hidden;
  margin: 0px;
}
.right {
  border-left: 2px solid;
  border-color: rgb(215, 217, 216);
  padding-left: 20px;
  float: right;
  width: 270px;
}
.left {
  margin: 0px;
  overflow: hidden;
  height: 100%;
}
body {
  margin: 0px;
  font-family: Calibri;
}
header20 {
  font-size: 16pt;
}
#inner {
  margin-left: 10px;
  width: 730px;
  margin: 0 auto;
}
.row {
  display: flex;
  /* equal height of the children */
}

<div id="parent" class="row">
  <div class="right">
    <br>
    <div class="switcher">
      <div class="switch-text">
        Some Text here
      </div>
      <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'>
    </div>
    <br>
    <br>
    <div class="switcher">
      <div class="switch-text">
        Some Text here
      </div>
      <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'>
    </div>

    <br>
    <br>
    <table style='width:250px;background-color:rgb(211,238,208)'>
      <tr>
        <td>
          <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span>
          </header20>
          <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
            <li>First point</li>
            <li>Second point</li>
            <li>Third point</li>
          </ul>
        </td>
      </tr>
    </table>
    <br>
    <table style='width:250px;background-color:rgb(211,238,208)'>
      <tr>
        <td>
          <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span>
          </header20>
          <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
            <li>First point</li>
            <li>Second point</li>
            <li>Third point</li>
          </ul>
        </td>
      </tr>
    </table>
    <br>
  </div>
</div>