Show Buttons over anything on Hover

Pure CSS

by Christopher O

HTML

<h2>Hover on the Image to see the Buttons</h2>
<div class="mainLeftDiv mainMH"><input placeholder="Search" type="text" class="headSearchBox">

<div class="show-image">

  <div class="stuff">Some text line one<br>Some text line two</div>
      <input class="deleteBtn" type="button" value="X" />
  </div>

<br class="clearflt"><br class="clearflt"><br class="clearflt">

<div id="xyz453" class="lstdiv"><span class="lstname">12345 Apple Orange</span> <span class="lstwhen"><span title="1500347897" class="timeago">2h</span></span> <br class="clearflt"> <span class="lstmsg">
                  tomorrow after 11:00am pst
              </span> <input type="button" value="X" class="deleteBtn"></div>
              
<br class="clearflt"><br class="clearflt"><br class="clearflt">

<div id="xyz453" class="lstdiv"><span class="lstname">12345 Apple Orange</span> <span class="lstwhen"><span title="1500347897" class="timeago">2h</span></span> <br class="clearflt"> <span class="lstmsg">
                  tomorrow after 11:00am pst
              </span> <input type="button" value="X" class="deleteBtn">
             </div>

CSS

body {
  padding:0;
  margin:0;
  /*font:1.1em/1.4 'Source Sans Pro', sans-serif;*/
  font:0.9em/1.4 'Open Sans', sans-serif;
  color:#333;
  background:#fff;
}

a:link,
a:visited {
  border-bottom:1px solid #c55500;
  text-decoration:none;
  color:#c55500;
}

a:visited {
  border-bottom:1px solid #730800;
  color:#730800;
}

a:hover,
a:focus,
a:active {
  border:0;
  color:#fff;
  background:#c55500;
}

a:visited:hover,
a:visited:focus,
a:visited:active {
  color:#fff;
  background:#730800;
}

#container {
  width:500px;
  padding:0 0 50px;
  margin:0 auto;
}

h1 {
  margin:1em 0 0;
  font-size:2.5em;
  font-weight:normal;
  line-height:1.2;
  text-align:center;
}

h2 {
  margin:0.5em 0 1.5em;
  font-size:1.25em;
  font-weight:normal;
  font-style:italic;
  text-align:center;
}

p {
  margin:1em 0;
}

.content h2 {
  margin:2em 0 0.75em;
  font-size:2em;
  font-weight:bold;
  font-style:normal;
  text-align:left;
}

blockquote {
  margin:1em 0;
}

blockquote p {
  margin:0;
  font-size:2em;
}

.follow {
  clear:both;
  margin-top:2em;
  font-size:1.125em;
}

.follow span {
  font-weight:bold;
}
/*  END Body Stuff  */

.maindiv{
  margin: 0 auto;
  border:1px solid;
  width:1132px;
  /*min-width:931px;*/
  /*max-width:1384px;*/
}

.mainLeftDiv{
  overflow-y: auto;
  width:300px;
  /*min-height:600px;*/
  float:left;
}
.mainRightDiv{
  overflow-y: auto;
  width:800px;
  /*min-width:500px;*/
  /*max-width:1010px;*/
  /*min-height:600px;*/
  background-color:#f5f5f5;
  float:left;
  margin-left:15px;
  padding:8px;
  vertical-align:text-bottom;
}
.mainMH{
  min-height:600px;
  max-height:600px;
  overflow-y: auto;

}

.TypeMsgDiv{
  width:615px;
  background-color:#ccc;
  float:right;
  padding:0 !important;
  text-align: center;
}
#TypeMsg{
    margin: 8px 10px;
    padding: 8px 10px;
    border-radius: 5px;
    border: 0px;
    background-color: #fff;
    width: 90%;
}

.lstdiv{
  margin-bottom:8px;
  padding:8px;
}
.lstdiv:hover{
 ...