<div style="background-image:url(image.jpg)"><img src="image.jpg"></div>
div {
backgorund: no-repeat 50% 50%;
background-size: cover;
}
div > img {
opacity: 0;
}
<button onclick=openbox(1)>Toggle 1</button>
<button onclick=openbox(2)>Toggle 2</button>
<button onclick=openbox(3)>Toggle 3</button>
<div class="item" id="item1">item 1</div>
<div class="item" id="item2" hidden>item 2</div>
<div class="item" id="item3" hidden>item 3</div>
function openbox(id){
var el = document.getElementById('item'+id);
if(el.hidden){
document.querySelectorAll('.item').forEach(item => item.hidden = true);
el.hidden = false;
}else{
el.hidden = true;
}
}
box-shadow: inset 0 3px 5px 0 rgba(0,0,0, 0.21);
components/com_users/views/registration/tmpl/default.php =>
templates/beez20/html/com_users/registration/default.php
и другие нужные шаблоны по такому же принципу.