csstextflip

Text won't fill the container in a column

I've been experimenting with various columns techniques and I'm liking this one. I plan on having one more image under them and centered. I have the images flipping once selected. My problem is the text on the back (.flip-item-desc) is inheriting the 50% width from the container (#top div). I can't figure out how to make the text div fill the back of the image.

#top div, #bottom div{
background-color: aqua;
text-align: center;
margin: 1% auto;
width: 50%;
height: auto;
}
.flip-item-desc{
font-family: sans-serif;
font-weight: bold;
color: white;
text-align: center;
font-size: 80%;
line-height: 1.237;
background: rgba(0,0,0,0.5);
width: 96%;
height: auto;
margin: 2% 2%;
padding: 2%;
position: absolute;
top:0;
left: 0;
overflow: hidden;
}

I copied and pasted my code with hosted image here: https://jsfiddle.net/digi57/ojLtu049/1/

Solution

  • I added a few lines in your CSS code -

    .flip-item-desc {
    min-width: 96%;
}
.back {
    overflow: hidden;
}

    here is the fiddle - https://jsfiddle.net/ojLtu049/2/