/ / Overlay Text über ein Bild in der Foundation - Zurb-Foundation

Overlay Text über ein Bild in der Foundation - Zurb-Foundation

Hi, ich habe folgenden Basis-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="/images/https://www.burgessyachts.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/0/00006250_13.jpg" />
</div>
</div>
</div>

Auf einem großen Bildschirm funktioniert es ok - ich will den Textauf dem Bild über rechts überspielt - aber wenn Sie den Bildschirm verkleinern den Text nach rechts verschwindet verschwinden - jemand Ideen, wie es auf allen Bildschirmen konsistent zu halten? Vielen Dank

Antworten:

1 für die Antwort № 1

Es ist besser, mit der linken Position als mit dem Rand zu positionieren. Sie können auch die Eigenschaft height löschen, um mehr Inhalt aufzunehmen.

#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;
}

Ich habe eine Demo gemacht: https://codepen.io/kemie/pen/pPoqOv


Verwandte Fragen


Kommentare (0)

Einen Kommentar hinzufügen