Как убрать текст в картинку?

Question

[Евгений Зубарев]

<div id="post_views_counter_list_widget-2" class="widget widget_post_views_counter_list_widget"><div class="widget-header">САМЫЕ ПРОСМАТРИВАЕМЫЕ ЗАПИСИ</div><ul><li> <span class="post-thumbnail"> <img src="https://rpsctyva.ru/wp-content/uploads/2019/05/content_nicholas_ii_of_russia_reading_the_st_petersburg_news.jpg" class="attachment-large size-large wp-post-image" alt="ВЕРОТЕРПИМОСТИ." srcset="https://rpsctyva.ru/wp-content/uploads/2019/05/content_nicholas_ii_of_russia_reading_the_st_petersburg_news.jpg 999w, https://rpsctyva.ru/wp-content/uploads/2019/05/content_nicholas_ii_of_russia_reading_the_st_petersburg_news-150x102.jpg 150w, https://rpsctyva.ru/wp-content/uploads/2019/05/content_nicholas_ii_of_russia_reading_the_st_petersburg_news-300x204.jpg 300w, https://rpsctyva.ru/wp-content/uploads/2019/05/content_nicholas_ii_of_russia_reading_the_st_petersburg_news-768x521.jpg 768w" sizes="(max-width: 700px) 100vw, 700px" title="ОБ УКРЕПЛЕНИИ ВЕРОТЕРПИМОСТИ. 17 АПРЕЛЯ 1905 г." width="700" height="475"> </span> <a class="post-title" href="https://rpsctyva.ru/veroterpimosti/">ОБ УКРЕПЛЕНИИ ВЕРОТЕРПИМОСТИ. 17 АПРЕЛЯ 1905 г.</a> <span class="count">(89)</span></li><li> <span class="post-thumbnail"> <img src="https://rpsctyva.ru/wp-content/uploads/2019/05/20190512_111939-e1557141288779-1024x1024.jpg" class="attachment-large size-large wp-post-image" alt="Престольный Праздник в честь св. влмч. Георгия Победоносца" srcset="https://rpsctyva.ru/wp-content/uploads/2019/05/20190512_111939-e1557141288779-1024x1024.jpg 1024w, https://rpsctyva.ru/wp-content/uploads/2019/05/20190512_111939-e1557141288779-150x150.jpg 150w, https://rpsctyva.ru/wp-content/uploads/2019/05/20190512_111939-e1557141288779-300x300.jpg 300w, https://rpsctyva.ru/wp-content/uploads/2019/05/20190512_111939-e1557141288779-768x768.jpg 768w" sizes="(max-width: 700px) 100vw, 700px" title="Престольный Праздник" width="700" height="700"> </span> <a class="post-title" href="https://rpsctyva.ru/prestolnyj/">Престольный Праздник</a> <span class="count">(67)</span></li><li> <span class="post-thumbnail"> <img src="https://rpsctyva.ru/wp-content/uploads/2019/05/02-4.jpg" class="attachment-large size-large wp-post-image" alt="Монахи VI-ого века в Америке" srcset="https://rpsctyva.ru/wp-content/uploads/2019/05/02-4.jpg 700w, https://rpsctyva.ru/wp-content/uploads/2019/05/02-4-150x121.jpg 150w, https://rpsctyva.ru/wp-content/uploads/2019/05/02-4-300x242.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" title="Монахи VI-ого века в Америке" width="700" height="564"> </span> <a class="post-title" href="https://rpsctyva.ru/monahi-vi-ogo-veka-v-amerike/">Монахи VI-ого века в Америке</a> <span class="count">(52)</span></li><li> <span class="post-thumbnail"> <img src="https://rpsctyva.ru/wp-content/uploads/2019/05/IMG_20190505_092903-1024x768.jpg" class="attachment-large size-large wp-post-image" alt="Литургия. Архиерейская литургия" srcset="https://rpsctyva.ru/wp-content/uploads/2019/05/IMG_20190505_092903-1024x768.jpg 1024w, https://rpsctyva.ru/wp-content/uploads/2019/05/IMG_20190505_092903-150x113.jpg 150w, https://rpsctyva.ru/wp-content/uploads/2019/05/IMG_20190505_092903-300x225.jpg 300w, https://rpsctyva.ru/wp-content/uploads/2019/05/IMG_20190505_092903-768x576.jpg 768w" sizes="(max-width: 700px) 100vw, 700px" title="Литургия. Архиерейская литургия и вечернее богослужение" width="700" height="525"> </span> <a class="post-title" href="https://rpsctyva.ru/liturgija-arhierejskaja-liturgija/">Литургия. Архиерейская литургия и вечернее богослужение</a> <span class="count">(33)</span></li></ul></div>

Comments

[WapSter]

Позиционировать относительно li

[Евгений Зубарев]

это кака, помогите

Answer 1

[VeryLongAgoDid]

.post-thumbnail {position: relative}
.post-thumbnail img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1}
span.post-thumbnail a {position: absolute; top: 20%; left: 20%; bottom: auto; right: 20%; text-align: center; z-index: 2}
span.post-thumbnail span {position: absolute; top: auto; left: 20%; bottom: 30%; right: 20%; text-align: center; z-index: 2}

Навскидку. Думаю этого хватит чтобы поправить самостоятельно

Comments

[Евгений Зубарев]

Ничего не меняется, или исчезает

Answer 2

[Anna_BS]

li {position: relative;} // к li лучше добавить класс
.post-title {position: absolute; bottom: 0; left: 0; z-index: 2;}

(90) и лучше внести в один блок и добавить к нему, что я писала выше для post-title