Try setting the z-index property of the content div higher than the image, like this:
.content{
z-index: 3;
}
This will make it so that the content div will be above the image. To make it get bigger as the browser gets smaller, you are going to need to use media queries. These are tags that you include in your head that will allow you to load different CSS files based on the size of the screen. Basically, you should just have larger font settings for the CSS files loaded when the screen is smaller. If you're unfamiliar with media queries, this is a good place to read up on them: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries. Good luck!
UPDATE:
Based on your comment, you should change your code to this:
[content]
This makes it so that the img and .content are wrapped by the .image. Then, in your CSS file, add this rule:
.content{
position: relative;
}
This will change the position of content relative to where the image div is located. Read up on the position property to learn how to move the .content around. You will still need media queries to update the size/position of the div in response to the browser size changing though.
