-1

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/

TylerH
  • 20,799
  • 66
  • 75
  • 101
Michael Heimes
  • 43
  • 1
  • 8

1 Answers1

1

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/

Rohit Kumar
  • 2,048
  • 1
  • 14
  • 28
  • Thank you! I'm not sure what border-box is doing. I took out the .back-text. I had that there in an attempt to fix it myself and now I don't think it's needed. Since I took it out, border-box isn't doing anything. – Michael Heimes Jul 29 '15 at 15:54
  • How do I center .flip-item-desc within the image? Should I use a different column method to retain control of that div? – Michael Heimes Jul 29 '15 at 15:58
  • I just set it for testing myself and forgot to remove it later, just copied and pasted the code here.. Well I set box-sizing: border-box to ensure the content will not flow on the right or left side as you set width to 96%, margin to 2% both sum up to 100%, and you have set padding also 2% and this would make the content to flow outward, but it is not happening so.. Forget it, it was just for a testing only.. – Rohit Kumar Jul 29 '15 at 16:05
  • you can center it by changing `left:0` to `left: 2%` – Rohit Kumar Jul 29 '15 at 16:12
  • I was referring to how do I center the text within the back of the image. When I change left:0 to left:2% is centers the whole image. When viewing the back, the aqua background is all the way to the left. I want that centered because when I am done I had a different background for just the text. – Michael Heimes Jul 29 '15 at 16:19
  • yeah, I also told you how to center that aqua background? you want to center the aqua background?? for that only I told to change the `left` value.. here is the updated fiddle which is centering the aqua background only - https://jsfiddle.net/ojLtu049/3/ – Rohit Kumar Jul 29 '15 at 16:22
  • Ah! Thank you so much! I did what you said and it didn't work the first time. I must have changed something accidentally. It works now! Thank you for your patience. I've very new to this and you save me endless (more) hours trying to figure this out. – Michael Heimes Jul 29 '15 at 16:30