Влад Серов

В общем, как я решил задачу.

1. Сперва я удалил все лишние элементы, оставил только то, что нужно выделять
   
2. Сделал трассировку картинки в иллюстраторе. ВАЖНО: все элементы сгруппировать по отдельности. В моем случае, каждое дерево это группа.
   
3. Сохраняем как SVG. Открываем редактором кода, и в css даем значение hover для "g" (групп)
   

Ну а дальше, стилизация как вам нужно.

Оптимально будет использовать Webp форматом, чего и требует тот же гугл для оптимизации. Вес на много ниже, потерь в качестве практически нет.

Почти на любом можно сделать. Я бы разработал шаблон на SliderRevolution и просто бы показал клиентку как дублировать слайды - затем уже поменять текст и картинку.

<?php query_posts( array ( 'post_type' => 'obekti', 'orderby' => 'meta_value_num', 'key' => 'cena', 'order' => 'DESC', 'posts_per_page' => 10 ) );
				 if ( have_posts() ) : the_post(); ?>
				<div class="item">

				<div class="ob-block-arh">
					<a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium', array('class' => 'img-responsive')); ?></a>
				
					<div class="stoim-arhive">Стоимость: <?php echo types_render_field( "cena", array( ) ); ?> € <span class="id-ob"><?php echo types_render_field( "id-obzhekt", array( ) ); ?></span>
					</div>
					<div class="opis-ob-arh">	
						<div class="blog-header">
							<h3><a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
						<div class="blog-meta meta-arh fs-polya">
							<div class="col-md-7 col-sm-7 col-xs-12">	
								<i class="fa fa-check-square-o" aria-hidden="true"></i> Площадь: <?php echo types_render_field( "plo", array( ) ); ?>  
								<br>
								<i class="fa fa-check-square-o" aria-hidden="true"></i> До моря: <?php echo types_render_field( "metrmore", array( ) ); ?>  
							</div>
							<div class="col-md-5 col-sm-5 col-xs-12">	
								<i class="fa fa-check-square-o" aria-hidden="true"></i> Комнат:  <?php echo types_render_field( "komn", array( ) ); ?>
								<br>
								<i class="fa fa-check-square-o" aria-hidden="true"></i> Спален:  <?php echo types_render_field( "spalni", array( ) ); ?>
							</div>
							
						</div><!-- end blog-meta -->
						</div><!-- end blog-header -->
						<div class="clear"></div>
						<div class="blog-desc">
							<?php the_excerpt(); ?>
						</div><!-- end blog-desc -->
				</div>
				</div>
				</div>

			<?php endif; ?>

Можно сделать легко, как в ручную так и при помощи конструкторов (того же visual composer)