<div class="slider">
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
<p class="projectname">Project</p>
<p class="clientname">Client Name</p>
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
<p class="projectname">Project</p>
<p class="clientname">Client Name</p>
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
<p class="projectname">Project</p>
<p class="clientname">Client Name</p>
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
<p class="projectname">Project</p>
<p class="clientname">Client Name</p>
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
<p class="projectname">Project</p>
<p class="clientname">Client Name</p>
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
<p class="projectname">Project</p>
<p class="clientname">Client Name</p>
</div>
</div>
.slider {
width: 500px;
margin: auto;
}
img {
width: 500px;
height: 200px;
}
.projectname{
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;
}
.clientname {
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 there,
Essentially, I have an image slider with text below each image. I am attempting to position the text on top of the image rather than below it. However, when I do this using a negative margin-top, the background doesn't display as intended.
This is the result I achieved: https://i.sstatic.net/v82zi.png
Despite having a background color set for the text, it's not visible when positioned over the image.
In conclusion, I want the text to sit on top of the image with the red background showing properly.