The following code concerns the second row of the screenshot. I want to superimpose the canvas (black square) to the stimuli (the square with the figure). Thanks
<div id="fbrow2" class="row" style="transform: translate(0%, 0%);position:relative; margin-top: 1.5em">
<div class="col-xs-1">
</div>
<div class="col-xs-2"> //left white square
<img src="images/cards_gif/fb/empty.gif" class="img-responsive center-block" id="feedback1_1" style="border: 5px solid transparent; position: relative; top: 0px;">
</div>
<div class="col-xs-2"> //left stimuli + canvas
<img src="images/cards_gif/stimuli/1.gif" class="img-responsive center-block" id="option1" style="border: 5px solid transparent; position: relative; top: 0px;">
<canvas id="canvas1" height=90% width=90% class="img-responsive center-block" style="border: 7px solid transparent; position: absolute;top:0;">
</div>
<div id = "Middle" class="col-xs-2">
</div>
<div class="col-xs-2"> //right stimuli
<img src="images/cards_gif/stimuli/2.gif" class="img-responsive center-block" id="option2" style="border: 5px solid transparent; position: relative; top: 0px;">
</div>
<div class="col-xs-2"> //right white square
<img src="images/cards_gif/fb/empty.gif" class="img-responsive center-block" id="feedback2_1" style="border: 5px solid transparent; position: relative; top: 0px;"></div><div class="col-xs-1">
</div>
</div>
I have played a lot with the properties but I cannot find the right combination. Can you please help me with that?
