before after

PHP : 

function shortcode_comparateur() {
return ‘
<div id= »ba-cont » style= »position:relative; width:100%; max-width:800px; height:400px; overflow:hidden; border:4px solid #fff; »>
<img src= »https://smartceilingdecor.com/wp-content/uploads/2026/06/IMG_0277-scaled.jpg » style= »position:absolute; width:100%; height:100%; object-fit:cover; »>
<div id= »ba-top » style= »position:absolute; top:0; left:0; width:50%; height:100%; overflow:hidden; border-right:4px solid blue; »>
<img src= »https://smartceilingdecor.com/wp-content/uploads/2026/06/IMG_E0230-scaled.jpg » style= »position:absolute; width:800px; height:100%; object-fit:cover; »>
</div>
<input type= »range » id= »ba-range » style= »position:absolute; width:100%; height:100%; opacity:0; cursor:col-resize; »>
</div>
<script>
document.getElementById(« ba-range »).oninput = function() {
document.getElementById(« ba-top »).style.width = this.value + « % »;
};
</script>’;
}
add_shortcode(‘comparateur’, ‘shortcode_comparateur’);