Article within the image

Question

I would like to have something along the lines of (the bordered thing is a a picture and text has inverse coloring so that it is easy to read)

Mind you the image is a simple div tag that is going to live in

    <div class = "row">
        <div class = "col-md-6">
            <h3>Title</h3>
            <p>
                Short and nice paragraph
            </p>
        </div>
    </div>

However I do not know a first thing of where to start from. I tried reading bootstrap tutorials and they didn't provide much. I understand that I haven't provided any piece of code to show my work, but I honestly do not even know where to start, or what to search for or what to do. So I am not really asking for a full solution or anything, but if you could point me in right direction I will be ever so grateful

score 1 · Answer 1 · answered Nov 13 '17 at 23:43

Quillion, I don't understand what your question is. The code above should render almost what you want. Nevertheless maybe this helps you:

I wrapped your code in a main container .container-fluid and in a .card element, both can be found in the bootstrap documentation.

I just added one additional style for a wider border. You can play with it a little and should be quickly get the style you need. Here is a link to the pen: https://codepen.io/scheinercc/pen/pdwdvx

Hope that helps.

<style>
    .custom-border-width-3 {
        border-width: 3px;
    }
<style>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="card mt-2 custom-border-width-3">
                <div class="card-body">
                    <h1>Title</h1>
                    <p>
                        Short and nice paragraph
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Thanks, I would like the bordered part to actually be an image and text within it to be inverse colored text (so that it is easy to read). Sorry for poor explanation, I updated the question — Quillion, Nov 13 '17 at 23:53

score 1 · Accepted Answer · answered Nov 14 '17 at 01:50

1

here you go

.col-md-6{
width:50%;
}

.image{
position:relative;
}



.image img{
width: 300px;
}

.text{
position:absolute;
top: 50%;
left: 0;
padding: 0 25px;
background: rgba(255,255,255,.6);
}

.text h3, .text p{
color:#f63;
}

<div class="row">
    <div class="col-md-6">
        <div class="image">
            <div class="text"><h3>Title</h3>
            <p>
                Short and nice paragraph
            </p>
            </div>
            <img src="https://i.pinimg.com/736x/51/d6/e3/51d6e3dcccd3bdac300202a5a3e99de0--pretty-cats-beautiful-cats.jpg">
            </div>
    </div>
</div>

answered Nov 14 '17 at 01:50

Andre Ramadhan

427
2
14

Exactly what I wanted! Anyway I can make the text inversed like here? https://i.stack.imgur.com/p5ULG.png – Quillion Nov 14 '17 at 02:31
If you want to use css for inverting text color visit this [link](https://stackoverflow.com/questions/17741629/invert-color-using-css) But, if you want to use java script use this (top answer) [link](https://stackoverflow.com/questions/9101224/invert-text-color-of-a-specific-element-using-jquery) . – Andre Ramadhan Nov 14 '17 at 02:40
awesome, pop/retro style eh? – Andre Ramadhan Nov 14 '17 at 02:48
yip yip, but remains to be seen. I am just learning how to css, been doing backend and desktop stuff all my life, so this newfangled web stuff is interesting. – Quillion Nov 14 '17 at 10:57

Article within the image

2 Answers2