CODEWITHSUNDEEP
zurb-foundation
Ian
Ian

Reputation: 900

overlay text over a image in foundation

Hi I have the following foundation codepen:

https://codepen.io/ianims/pen/PmoqBZ

code:

$(document).ready(function () {
    $(document).foundation();
});

body {
  background-color: #a3d5d3;
}

#wrap {
    position:relative; /* make this relative to have the inner div absolute without     breaking out */
/*    width: 200px;  /* fix the width or else it'll be the entire page's width */
    background: silver; 
    border: 1px solid grey
}

#text {
        color:#ffffff;
        margin-left: 70%;
    position: absolute; 
        width:250px;
        height:60%;
    top: 0; 
    bottom: 0; 
    background: black; 
    opacity:0.5;
        padding :20px;
}

<div class="row fullWidth">
        <div class="large-12 columns">
            <div id="wrap">
                                        <div id="text">
                                            <br /><br /><br /><br />
                                            <h3>MCA Coding and MLC Compliance</h3>
                                            <p>
                                              This is some text which I need to show  on the  right hand side. This is some text which I need to show  on the  right hand side. This is some text which I need to show  on the  right hand side. This is some text which I need to show  on the  right hand side.  

                                            </p>
                                        </div>
<img src="https://www.burgessyachts.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/0/00006250_13.jpg" />
            </div>
        </div>
</div>

On a large screen it works ok -- I want the text overplayed on the image over to the right - but if you shrink the screen down the text starts to disappear off to the right -- anyone any ideas how to keep it consistent on all screens??? thanks

Upvotes: 0

Views: 816

Answers (1)

spiral
spiral

Reputation: 608

It's better to position using the left: position as opposed to margin. You might also want to delete the height property so it accomodates more content.

#text {
   padding-top: 2em; /*replaces the <br>s in your html*/
   color: #ffffff;
   position: absolute;
   width: 250px;
  /*height: 60%;*/
  top: 0;
  right:7.5%; /* instead of margin*/
  background: black;
  opacity: 0.5;
  padding: 20px;
}

I made a codepen demo: https://codepen.io/kemie/pen/pPoqOv

Upvotes: 1

Related Questions