CODEWITHSUNDEEP
htmlcss
theamateurdataanalyst
theamateurdataanalyst

Reputation: 2834

How to make text box to overlap with the image?

I have the following HTML and CSS:

/*.fullrecent{
  position: relative;
}*/
.recentimage {
  position: relative;
  float: left;
  width: 50%;
  height: 500px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.whitebox {
  background-color: white;
}
<div class="fullrecent">
  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">Hello World!</div>
  </div>
  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">Hello World!</div>
  </div>
  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">Hello World!</div>
  </div>
  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">Hello World!</div>
  </div>
</div>

What I am aiming to do is create a 2x2 matrix with these images, which I was able to do, but it was ruined when I tried to add an additional feature which is adding a white rectangle that overlaps each image from left end to right end at the bottom of each image. Anyone know how to do this?

Upvotes: 0

Views: 2719

Answers (6)

g1ji
g1ji

Reputation: 1129

You can do this by following code

<html>
<style>
.recentconcert
{
margin:3px;
float: left;
width:  48%;
height: 500px;
background-image:url('https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2');
background-repeat:   no-repeat;
background-size:     cover;
position:relative;
border:2px solid black;
}   
.whitebox
{
height:40px;
width:100%;
bottom:0px;
position:absolute;
text-align:center;
background-color: white;
}
</style>

   <body>
<div class="fullrecent">
<div class="recentconcert">
<div class="whitebox">
Hello World!
</div>
</div>


<div class="recentconcert">
<div class="whitebox">
Hello World!
</div>
</div>


<div class="recentconcert">
<div class="whitebox">
 Hello World!
 </div>
 </div>


<div class="recentconcert">
<div class="whitebox">
Hello World!
</div>
</div>
</div>


</body>
</html>

Upvotes: 0

Stickers
Stickers

Reputation: 78686

Here it is if I understood you question correctly. The key is to set the text box as absolute position if you want it to overlap with the image.

http://jsfiddle.net/592cxncn/

.fullrecent {
    overflow: auto;
}
.recentconcert {
    float: left;
    width: 50%;
    position: relative;
    text-align: center;
}
.recentimage {
    width: 100%;
    height: auto;
    vertical-align: top;
}
.whitebox {
    /* background: white; */
    background: rgba(255,255,255, .75);
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}
<div class="fullrecent">
    <div class="recentconcert">
        <img class="recentimage" src="//dummyimage.com/500/333"/>
        <div class="whitebox">Hello World!</div>
    </div>
    <div class="recentconcert">
        <img class="recentimage" src="//dummyimage.com/500/666"/>
        <div class="whitebox">Hello World!</div>
    </div>
    <div class="recentconcert">
        <img class="recentimage" src="//dummyimage.com/500/999"/>
        <div class="whitebox">Hello World!</div>
    </div>
    <div class="recentconcert">
        <img class="recentimage" src="//dummyimage.com/500/ccc"/>
        <div class="whitebox">Hello World!</div>
    </div>
</div>

Upvotes: 1

Maverick976
Maverick976

Reputation: 538

I'm not 100% sure exactly what you mean...but what about this fiddle? Is that what you meant?

Instead of using an img element, I'm setting the divs background-image property to an image url (avoids having to use position:absolute in this case). I'm also using an rgba() to make the white background semi-transparent.

CSS:

.recentconcert{
    background-image: url('https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2');
    background-repeat: no-repeat;
    background-position: center;
    width:50%;
    height:500px;
    float:left;     
}

.whitebox{
    background-color: rgba(255,255,255,.6);
    width:100%;
    margin-top:450px;
    height:50px;
    text-align:center;
}

Upvotes: 0

Anand Siddharth
Anand Siddharth

Reputation: 977

<html>
<style>
html, body{
  height: 100%;
  width: 100%;
} 
*{
  margin:0;
  padding:0;
} 
/*.fullrecent{
  position: relative;
}*/
.recentconcert{
  display: inline-block;
  position: relative;
  height : 500px;
  width: 49.99%;
}
.recentimage{
  height: 100%;
  width: 100%;
  background-position: 50% 50%;
  background-repeat:   no-repeat;
  background-size:     cover;
  
  
}   
.whitebox{
  position: absolute;
  bottom: 0;
  left: 0;
  width : 100%;
  height : 10px;
  background-color: white;
}
</style>

<body>
<div class="fullrecent">
  <div class="recentconcert">
  <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  

  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  

  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  

  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  </div>
</div>


</body>
</html>

Upvotes: 0

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

You can use position:absolute to overlap your text on the image.

Update your css to this:

.recentconcert {
  position: relative;  
  float: left;
  width: 50%;
}

.recentconcert:after {
  display: block;
  clear: both;
  content: "";
}

.whitebox {
  background-color: white;
  position: absolute;
  bottom: 0;
}

.recentimage{
  position: relative;
  float: left;
  width:  100%;
  height: 500px;
  background-position: 50% 50%;
  background-repeat:   no-repeat;
  background-size:     cover;
}

Fiddle

Upvotes: 1

Dima
Dima

Reputation: 287

Is it the result you wanted :

<html>
<style>
/*.fullrecent{
  position: relative;
}*/
.recentconcert{
  position: relative;
  float: left;
  width:  50%;
  background-position: 50% 50%;
  background-repeat:   no-repeat;
  background-size:     cover;
  
  
}   
.whitebox{
  background-color: white;
}
.recentimage{
 width: 100%;
 }

</style>

<body>
<div class="fullrecent">
  <div class="recentconcert">
  <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  

  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  

  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  

  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">
    Hello World!
    </div>
  </div>
  </div>
</div>


</body>
</html>

Upvotes: 0

Related Questions