You can select the wrapper element, when elements are shown, the mouseout
event is triggered.
$('.background').hover(function() {
$('.image-photo-overlay, .image-photo-controls').toggle();
});
Other option is using CSS pointer-events
property:
.image-photo-overlay, .image-photo-controls {
pointer-events: none;
}
$('.image-photo').hover(function() {
$(this).siblings().toggle();
});