Как показывать лишь часть картинки WP?

Question

[Buildr]

Здравствуйте! Проблема следующего плана: транслируем на сайте примеры лендингов, причем важно, что по клику картинка увеличивается до реального размера, чтобы человек мог прочитать полностью. Но поскольку многие из них очень длинные, уменьшать для страницы на сайте приходится во много раз, в итоге не очень красиво. Длинный маленький непонятный формат.

Скажите, можно ли какими-то плагинами сделать так, чтобы изначально показывало лишь большую увеличенную часть лендинга, скажем, скрин шапки и 1 блока, а вот по клику уже открывался весь лендинг целиком?

Answer 1

[Орхан Гасанлы]

Здравствуйте!
Посмотрите в сторону overflow: hidden.
Вот пример:
https://jsfiddle.net/h7j2qxmb/1/

Еще один пример реализации - добавление скролла
https://spartan.by/portfolio/bysky
Наведите на блок со скрином слева

Стиль и html:

<div class="portfolio_header"> 
	<img src="https://spartan.by/wp-content/uploads/2019/07/scr1-1-795x1810.png"/>
</div>

.portfolio_header {
    height: 300px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.portfolio_header img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}
.portfolio_header:hover img {
    animation: moveSlideshow 5s linear;
        animation-fill-mode: none;
    animation-fill-mode: forwards;
}

Answer 2

[Buildr]

Эх, это сложновато, программное все. А нет какого-то такого плагина?

Comments

[Орхан Гасанлы]

Что сложного в предоставленном мною коде?))
Другой вариант - обратиться во фриланс биржу