Zoom-эффект увеличения изображения при загрузке страницы

Конструкция в верстке. Фон у diva в данном примере генерируется из миниатюры. Можно div заменить на изображение.

<div style="overflow: hidden;"><div id="post-div-pic" style="background-image: url(<?=$url?>);"></div></div>

Пример полный

<?php if( has_post_thumbnail() ) : ?>

<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'has_post_thumbnail' );
$url = $thumb['0'];
?>
<div style="overflow: hidden;"><div id="post-div-pic" style="background-image: url(<?=$url?>);"></div></div>

<?php endif; ?>

Скрипт в HEADER

<script>

window.onload = function() {
if($("div").is("#post-div-pic")) {

document.getElementById('post-div-pic').className += 'loaded'

}
};

</script>

CSS стили

#post-div-pic {
background-size: cover;
background-position: center;
height: 300px;
/*background-attachment: fixed;*/ /*если задний фон однородный*/
transform: scale(1.5);
transition: transform 3s;
}

.loaded {
transform: scale(1) !important;
}

Поделиться в соц. сетях: