I'm attempting to achieve an effect similar to the one showcased here:
When you hover over an image in that particular section, the image enlarges smoothly to cover most of the screen. What's noteworthy about this transition is that the larger version of the image precisely aligns with the thumbnail image, giving the impression that the image is uncovering itself rather than just expanding.
Despite multiple attempts, I've been unable to find a solution. My current efforts are far from the desired outcome.
EDIT:
The script below is my best attempt so far but still falls short of the intended solution:
This script triggers the display of a DIV containing the image as a background upon hovering over it. The issue is that it seems like the image is expanding instead of "uncovering".
$(document).ready(function(){
$('.ejemplo').hover(function(){
console.log('hoveeeeer');
var img = $(this).data('img');
console.log(img);
$('.c1').css(
'background-image', 'url('+img+')',
)
$('.c1').show()
$('.c1').css(
'opacity', '1'
)
$('.ejemplo').css(
'opacity', '0'
)
$('.header_highlights').css(
'opacity', '0'
)
var audio1 = $(this).data('audio');
var stereo = document.getElementById(audio1);
//Example of an HTML Audio/Video Method
stereo.play();
}).mouseout(function(){
console.log('no hover')
$('.c1').hide()
$('.c1').css(
'opacity', '0'
)
$('.ejemplo').css(
'opacity', '1'
)
$('.header_highlights').css(
'opacity', '1'
)
var audio1 = $(this).data('audio');
var stereo = document.getElementById(audio1);
stereo.pause();
});
});
HTML:
<div class="container-flex w-container" style="">
<?php $behind_the_image_images = get_field( 'behind_the_image' ); $count= 0;?>
<?php if ( have_rows( 'behind_the_image' ) ) : ?>
<?php while ( have_rows( 'behind_the_image' ) ) : the_row(); ?>
<div data-w-id="50eadee3-1406-6c5c-563f-0957896a13d2" style="opacity:0" class="div-block-5">
<a id="hover-<?=$count?>" href="#" class="link-block-4 _1 link-<?=$count?> w-inline-block ejemplo" style="position:relative;" data-audio="audio-<?=$count?>" data-img="<?= get_sub_field('image'); ?>"></a>
<div class="header_highlights _2"><?= get_sub_field( 'title_image' ) ?></div>
<style>.link-<?=$count?> {background-image:url('<?= get_sub_field( 'image' ); ?>')!important;}</style>
<audio id="audio-<?=$count?>">
<source src="<?= get_sub_field('audio_hover'); ?>" type="audio/mpeg"></source>
<source src="nav.ogg" type="audio/ogg"></source>
</audio>
</div>
<?php $count++; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<div style="" class="c1"></div>
</div>