CODEWITHSUNDEEP
htmlcss
Gags
Gags

Reputation: 3839

place and image and text over on div with background

I want to display my picture and content as below:

pic

The white background under image is a jpg file which will be parent div background.

I tried placing like as below but was not sure how to place text then

<div style="position: relative; left: 0; top: 0;">
  <img src="images/A.jpg" style="position: relative; top: 
   0; left: 0;"/>
   <img src="images/B.jpg" 
   style="position: absolute; top: 30px; left: 65px;height:220px"/>
</div>

Please help me here.

Upvotes: 0

Views: 131

Answers (1)

emmanuel
emmanuel

Reputation: 9615

You could try this approach using css3 shadow.

#image_container {
  background: #ffffff;
  width: 140px;
  text-align: center;
  padding: 10px;
  -webkit-box-shadow: 1px 1px 8px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 1px 1px 8px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 1px 1px 8px 0px rgba(50, 50, 50, 0.75);
  margin: 10px;
}
<div id="image_container">
  <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1" class="main_image">
  <div class="text">text here</div>
</div>

If you prefer css2 way you have to add background to #image_container.

#image_container {
  background: url('https://i.sstatic.net/HcfbJ.jpg');
  width: 320px;
  height: 320px;
  text-align: center;
  padding: 40px;
  margin: 10px;
  box-sizing: border-box;
}
.main_image {
  width: 180px;
  height: 180px;
}
.text {
  padding-top: 40px;
}
<div id="image_container">
  <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1" class="main_image">
  <div class="text">text here</div>
</div>

Upvotes: 2

Related Questions