gnase gnase - 2 months ago 15
CSS Question

Mouse effect for banners

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

before

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.

after

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

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