Подобный вопрос уже обсуждался: Как вывести изображение поверх миниатюры поста в зависимости от категории? Конечно, там решалась несколько иная задача, но результат аналогичный: картинка выводилась поверх другой картинки. Делается это просто: создается контейнер, внутри которого находится миниатюра, а поверх нее располагается слой с фоновой картинкой (кнопкой play).
Ну а тонкости уже зависят от вашей фантазии. Например, можно сделать кнопку ссылкой, и тогда по клику будет происходить какое-то действие (например, воспроизведение видео).
Ответить
DimaDodonov автор
Спасибо Александр! Фантазии у меня будь здаров)
В коде допущены ошибки при использовании проверяйте правильность написания
Подобный вопрос уже обсуждался: Как вывести изображение поверх миниатюры поста в зависимости от категории? Конечно, там решалась несколько иная задача, но результат аналогичный: картинка выводилась поверх другой картинки. Делается это просто: создается контейнер, внутри которого находится миниатюра, а поверх нее располагается слой с фоновой картинкой (кнопкой play).
HTML:
<div class="box"> <div class="overley"></div> </div>CSS:
.box {position:relative; width:200px; height:60px; overflow:hidden;} .video-thumb {width:200px; height:auto;} .overley {position:absolute; top:0; left:0; width:100%; height:100%; background:url(img/play.png) no-repeat center center;}Ну а тонкости уже зависят от вашей фантазии. Например, можно сделать кнопку ссылкой, и тогда по клику будет происходить какое-то действие (например, воспроизведение видео).
Спасибо Александр! Фантазии у меня будь здаров)