Modal box content depends of custom field - php

Question

I'm trying to display 2 different content in a modal box using featherlight.js. It's very simple :
If there is an 'image', it displays the 'image', otherwise if there is a 'soundcloud url', it displays a 'soundcloud url' iframe.
But it doesn't work!
Here is my website
And here is the code
<div id="post">
<a href="#" data-featherlight="#featherlight">
<div class="img">
<div class="art-overlay">
<div class="small">
<img src="<?php echo get_template_directory_uri(); ?>/images/skuar_small.png" alt="skuar" />
</div>
</div>
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('post-thumbnails');
}
?>
<?php
if( get_field( 'image' ) ) { ?>
<?php the_field( 'image' ); ?>
<?php }
else { ?>
<iframe width="600" height="166" scrolling="no" class="lightbox" class="frame" id="featherlight" frameborder="no" src="https://w.soundcloud.com/player/?url=<?php the_field( 'music' ); ?>&color=1b1e25&theme_color=1b1e25&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
<?php endif; ?><?php } ?>
</div>
</a>
</div>

Answer 1

If you have a look now, using featherlight.js it works : skuar.com
Just because I removed the overlay on thumbnails!
Is there any way to add this very simple overlay?
<div class="art-overlay">
<div class="small">
<img src="<?php echo get_template_directory_uri(); ?>/images/skuar_small.png" alt="skuar" />
</div>
.art-overlay {
display: flex;
background: rgba(0,0,0,0.2);
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
.small {
margin: auto;
width: 59px;
height: 75px;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
}
#post:hover .art-overlay {
opacity: 1;
cursor: pointer;
}