kevin seda kevin seda - 5 months ago 33
jQuery Question

Text on image slider

<div class="slider">
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
<p class="projectnaam">Project</p>
<p class="klantnaam">Klantnaam</p>
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
<p class="projectnaam">Project</p>
<p class="klantnaam">Klantnaam</p>
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
<p class="projectnaam">Project</p>
<p class="klantnaam">Klantnaam</p>
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
<p class="projectnaam">Project</p>
<p class="klantnaam">Klantnaam</p>
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
<p class="projectnaam">Project</p>
<p class="klantnaam">Klantnaam</p>
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
<p class="projectnaam">Project</p>
<p class="klantnaam">Klantnaam</p>
</div>
</div>

.slider {
width: 500px;
margin: auto;
}

img {
width: 500px;
height: 200px;
}


.projectnaam{
text-align:left;
font: 30px/30px 'grotesque_mtextracondensed', 'Arial Black', 'Arial Bold', sans-serif;
text-transform: uppercase;
padding:0 0 0 20px;
background-color:red;

}

.klantnaam {
text-align:left;
font-size: 15px;
font-style: italic;
padding:0 0 0 20px;
background-color:red;

}


$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear'
});


https://jsfiddle.net/5ox31m2a/69/

Hello everyone,

Basically i have this image slider, under each slider i have some text.
My problem is that when i try to position the text on the image (instead under the image) The background doesn't come with it. I tried positioning the text on the image with a negative margin-top.

This was the result of my try: enter image description here

Even tho there is a background on the text, it doesn't show.

So long story short I want the text to be on the image instead of under the image. (with the red background).

Answer

Try to change the position of text by absolute and change the top/bottom of them.

Example DEMO