Css overlapping div with multiple children

Question

I need help to fix a couple of things in the grid. You can see the website here (just click on search button and scroll down to see the items).

1) the 6 columns overlap each other when they're all clicked (screen 1 and 2). Try to click on each of them to reproduce this.I'd like the to stick in the original position. basically the div with text and audio player should just replace the image (onclick)

html sample

<div class="row">
            <div class="col-sm-4">
                <img id="img1" onclick="play(1)" src="data/img/portfolio/fox.jpg" class="img-responsive img-animals" alt="Fox">
                <div class="inner_text_img" id="inner1">
                    <h3>Red Fox - <a class="stopsound" onclick="stop(1)">X</a></h3>
                    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
                    <audio class="audio_player" id="audio1" src="data/sound/animals/fox.mp3" type="audio/mpeg"></audio>
                </div> 
            </div>
            <div class="col-sm-4">
              ....

css

audio{
  width: 100%;
}

.inner_text_img{
  max-width: 360px;
  max-height: 260px;
}
.col-sm-4:hover img{
  opacity: 0.5;
}

.inner_text_img{
  width: 100%;
  height: 100%;
  color: red;
  position: absolute;
  color: #2C3E50;
  top:0px;
  left:0px;
  display:none;
}

.inner_text_img{
    background-color: #f3f3f3;
}

js to switch div and start/stop the audio

function play(n) {

    var audio = document.getElementById("audio" + n);
    var inner_el = document.getElementById("inner" + n);
    var img = document.getElementById("img" + n);

    if (audio.paused) {
        img.style.display = 'none';
        inner_el.style.display = 'block';
        audio.controls = true;
        audio.play();
        audio.loop = true;
    } else {
        img.style.display = 'block';
        inner_el.style.display = 'none';
        audio.controls = false;
        audio.pause();
    }
}

function stop(n) {
    var audio = document.getElementById("audio" + n);
    var inner_el = document.getElementById("inner" + n);
    var img = document.getElementById("img" + n);

    img.style.display = 'block';
    inner_el.style.display = 'none';
    audio.controls = false;
    audio.pause();

}

edited to one question

thank you!

Answer 1

remove the position: absolute in .inner_text_img {} style