slick.js の各画像の上にテキストを表示する

Question

slick.js　を利用してスライダーを設置しました。
各画像の上に背景色（テキスト用の帯）とテキストを表示したいです。
テキストのみの場合は正しく表示できるのですが、背景色を設定すると中央の画像の幅を超えて背景色が表示されます。

<div class="slider mypattern">
<div><a href="#"><img src="./img/img01.jpg"></a><p class="textphoto">画像1テキスト]</p></div>
<div><a href="#"><img src="./img/img02.jpg"></a><p class="textphoto">画像2テキスト</p></div>
<div><a href="#"><img src="./img/img03.jpg"></a><p class="textphoto">画像3テキスト</p></div>
<div><a href="#"><img src="./img/img04.jpg"></a><p class="textphoto">画像4テキスト</p></div>
<div><a href="#"><img src="./img/img05.jpg"></a><p class="textphoto">画像5テキスト</p></div>
</div>

.slider {
  display:none;
}

.slider.slick-initialized {
  display: block;
}

.slider {
width: 90%;
margin: 0 auto 80px;
}

.slick-slide img {
width: 100%;
height:350px;
}
.mypattern{
width: 100%;
}
.mypattern .slick-slide{
margin: 5px;
}
.mypattern .slick-slide:not(.slick-center) {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
transition: 0.2s linear;
}

.textphoto { 
	width:	100%;
	font-size:100%;
	text-align:right;
	bottom:	4px;
	margin:	0;
	padding:0;
	color:	#fff;
	background:rgba(0,0,0,0.4); 
	position:absolute;
	padding-right:1rem;
}

    <script>
$("document").ready(function(){
$('.mypattern').slick({
autoplay: true,
autoplaySpeed: 5000,
speed: 800,
dots: true,
arrows: false,
centerMode: true,
centerPadding: '20%'
});
}); 
</script>

Comments

[kszk311]

JSのソースも追記してください。また、キャプチャを添付するか、CodePenなど実際に動くURLなど見れると助かります。

[kagaminoB]

CSSとJSのコードを追記しました。CODEPENにトライしましたが使い方がよくわからずこちらに画面キャプチャを追加しました。よろしくお願いします。

Answer 1

コードありがとうございます。
下記追加したら直るかと思います。

.slick-slide {
	position: relative;
}
.textphoto {
	box-sizing: border-box;
}