How to have a clickable text box appear over an image on hover

Question

I have an image inside of a DIV. When a user hovers over the image I would like a white box with 65% opacity to come up from the bottom of the image that would only cover a about 30% of the bottom of the image. In that box would be text that say something like "+ Order Sample" and when the user clicks on that box it would be added to the cart.

Easy enough to handle the adding to cart part it's the css and possibly javascript necessary to make this happen that I'm struggling with. Can someone get me started? Here's what I have so far. This includes edits from first answer.

foreach($array as $key => $value) {
    $imgsrc = $value['option_value']. ".jpg" ;
    $option_name = $value['option_name'] ;
    $fullname = $value['quality'] . " " . $value['color'] ; 
    $cbpg = $value['cbpg'] ;
    $space = $value['space'] ;

    print "<div class='colorbook-color-guide-div' onmouseover='showOrderSample();'>" ;
      print "<img class='colorbook-color-guide-image js-color-option js-tooltip' nopin='nopin' data-tooltip-content='$option_name' src='/images/uploads/colors/$imgsrc' alt='$option_name' >" ;
      print "<div id='orderSample' onclick='hideOrderSample();alert(\"order sample\");' ><b>+ Order Sample</b></div>" ;
      print "<p class='colorbook-color-subtitle'>$fullname</p>" ;
      //print "<p class='colorbook-color-subtitle'>$cbpg $space</p>" ;
    print "</div>" ;

}

And here's the CSS I have.

.colorbook-color-guide-div {
  width: 176px;
  min-height: 107px;
  margin-bottom: 2px;
  margin-right: 21px;
  cursor: pointer;
  float:left;
  text-align:center;
}
.colorbook-color-guide-image {
  width: 176px;
  min-height: 86px;
}
.colorbook-color-subtitle {
    font-family: HelveticaNeueLT-Light, Museo-500, Helvetica, Arial, sans-serif;
    font-style: normal ;
    font-weight:600 ;
    font-size: 13px ;
    font-size: 1.3rem ;
    color: #929496 ;
    margin-top: -3px;
}
#orderSample {
    height:0px;
    top:100px;
    width:176px;
    display:block;
    overflow:hidden;
    background:white;
    opacity:.65;
}

And the JavaScript

function showOrderSample() {
  var element = document.getElementById("orderSample");
  element.style.height = "30px"; 
  element.style.top = "70px"; 
}

function hideOrderSample() {
    setTimeout(function () {
        document.getElementById("orderSample").style.height = "0px"; 
    }, 500);
}

Answer 1

My example uses just JavaScript, html and fixed sizes but it does what was asked for.

Look at the Fiddle here:

https://jsfiddle.net/ag7to93q/9/

<script>
function showOrderSample(element) {   

  element.children[1].style.height = "30px"; // access the second child of the div element
  element.children[1].style.top = "70px"; 

}

function hideOrderSample(element, event) {
    if (event && event.target.classList.contains("hoverDiv")) {
        alert("buy buy buy!");
        setTimeout(function () {
            element.children[1].style.height = "0px"; 
        }, 200);
    }
    else {
// do something here
    }
}
</script>
<div style="position:absolute;top:50px;left:50px;width:200px;height:100px;background:green;" onmouseenter="showOrderSample(this);" onclick="hideOrderSample(this, event);" onmouseleave="hideOrderSample(this, event);" >
    <img style="position:absolute;height:100px;width:200px;" src="https://jsfiddle.net/img/logo.png" ></img>
    <div id="orderSample" class="hoverDiv" style="position:absolute;height:0px;top:100px;width:200px;display:block;overflow:hidden;background:white;opacity:.65;"><b>+ Order Sample<b>
    </div>
</div>

Answer 2

Look at the following jsFiddle . Keep in mind accurate answers require more detail, so based on your question I came up with an approximate (hopefully as accurate as possible) response. Let me know if it helped in getting you closer to where you want to be, we can work on something closer if needed.

HTML:

<div class="popup-overlay--gray">a</div>
<a class="popup-btn__open" href="#">Open Popup</a>

<div>
    <a class="popup-btn__close" href="#">Close Popup</a>
    <img class="popup" src="http://placehold.it/300x300"/>
</div>

CSS

[class*="popup-btn"] { text-decoration: none; color: white; background-color: gray; }
.popup-btn__close { top: 0; right: 0; }
.popup { display: none; }
.popup-overlay--gray { position: absolute: width: 100%; height: 100%; background-color: #333; opacity: 0.7; z-index: 1000; }

jQuery 2.1.3

var timer,
    delay = 500;

$(".show-popup").hover(function(){
    // on mouse in, start a timeout
    timer = setTimeout(function(){
        // showing the popup
        $('.popup').fadeIn(500);
    }, delay);
}, function() {
    // on mouse out, cancel the timer
    clearTimeout(timer);
});

Answer 3

Fiddle

Jquery solution

$('document').ready(function () {

    $('#myimage').hover(
    //hover in
    function () {
        $("#backgroundDIv").css('z-index', 101);
    },
    //hover out
    function () {
        $("#backgroundDIv").css('z-index', 99);
    });

});

HTML

<div id="mainDiv">
    <img id="myimage" src="http://i48.fastpic.ru/big/2013/0606/5c/aa5f8d03b34f8e79f18c07343573bc5c.jpg" />
    <input type="text" value="add me" id="backgroundDIv"/>
</div>

CSS

#myimage {
    z-index:100;
    position: absolute;
}
#backgroundDIv {
    z-index=99;
    position: absolute;
    top:200px;
    background-color:#fff200;
    opacity:0.4;
}