CODEWITHSUNDEEP
htmlcssoverlay
Assad Nazar
Assad Nazar

Reputation: 1464

css text overlay on full image

i am stuck while showing an overlay text that should be like: target

what i have done is:

<div class="row">
            <div class="col-md-3 program-cat">
                <img src="<?php echo EF_THEME_BASE_URL; ?>/images/infants.jpg" >
                <div class="program-desc">
                    Short description of Aqua Aerobics comes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere, mi at pharetra tincidunt, odio ante eleifend ante, a aliquam odio urna nec nisl. Duis fermentum congue ultricies. Sed id aliquet augue.
                    <a class="btn button" href="#">Learn to Swim</a>
                    <span>Infants Program</span>
                </div>
            </div>

        </div>

my css:

#program-cats .program-cat {
    width: 460px;
    height: 100%;
    position: relative;
}

#program-cats .program-cat img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

#program-cats .program-cat .program-desc {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate( -50%, -50%);
    color: white;
    text-align: center;
    background-color: rgba(31, 127, 134, 0.5);
    padding: 5px 0;
    border-top: 1px solid #FFFFFF;
}

I am unable to achieve the layout as shown in the picture.

Any help will be appreciated.

Upvotes: 1

Views: 970

Answers (3)

DataCure
DataCure

Reputation: 425

Here is my version

div#messageBox{
  background: url('https://www.familiesonline.co.uk/images/default-source/local/east-surrey/in-the-know-images/boy-swimming-underwater.jpg?sfvrsn=368f039e_0');
  background-size: 100% 100%;
  font-family: arial;
  width: 400px;
  padding: 20px
}

.program-desc{
  background: rgba(26, 127, 139, 0.6);
  color: white;
  padding: 2em;
  height: calc(100% - 4em);
  width: calc(100% - 4em);
  font-family: arial;
}

div.program-desc a{
  display: inline-block;
  margin-top: 1.2em;
  height: 2em;
  width: 10em;
  background: white;
  line-height: 2;
  text-align: center;
  text-decoration: none;
  color: rgb(26,127,139);
}
.programName{
  position: relative;
  left: -1.1em;
  top: 0.5em; 
  width: calc(100% + 0.2em);
  border-top: 2px solid white;
  padding-top: 1ex;
  padding-left: 1em;
  padding-right: 1em;
  font-size: 22pt;
  text-align: center
}
.word1{
  font-weight: 900;
  text-transform: uppercase;
}
.word2{
  text-transform: uppercase;
  font-weight: 100;
}
<div id="messageBox">
  <div class="program-desc">
      Short description of Aqua Aerobics comes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere, mi at pharetra tincidunt, odio ante eleifend ante, a aliquam odio urna nec nisl. Duis fermentum congue ultricies. Sed id aliquet augue.<br>
      <a class="btn button" href="#">Learn to Swim</a><br>
      <div class="programName"><span class="word1">Infants</span> <span class="word2">Program<span></div>
  </div>
</div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 274097

You are almost good, simply use left/top/right/bottom with same value to obtain this layout, and no need to use tranlation of % values:

.program-cat {
  display:inline-block;
  position: relative;
}

.program-cat img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.program-cat .program-desc {
  position: absolute;
  bottom: 10px;
  left:10px;
  right:10px;
  top:10px;
  color: white;
  text-align: center;
  background-color: rgba(31, 127, 134, 0.5);
  padding: 5px 0;
  border-top: 1px solid #FFFFFF;
}
<div class="row">
  <div class="col-md-3 program-cat">
    <img src="https://lorempixel.com/400/200/">
    <div class="program-desc">
      Short description of Aqua Aerobics comes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere, mi at pharetra tincidunt, odio ante eleifend ante, a aliquam odio urna nec nisl. Duis fermentum congue ultricies. Sed id aliquet augue.
      <a class="btn button" href="#">Learn to Swim</a>
      <span>Infants Program</span>
    </div>
  </div>

</div>

Upvotes: 1

fyasir
fyasir

Reputation: 2970

.program-cat {
    position: relative;
    display: flex;
}

.program-cat img {
    width: 100%;
    height: 100%;
}

.program-cat .program-desc {
    position: absolute;
    margin: 30px;
    width: 400px;
    color: white;
    text-align: left;
    background-color: rgba(31, 127, 134, 0.5);
    padding: 20px;
}

.program-cat .program-desc a {
   display: block;
    margin: 10px 0;
    padding: 10px 20px;
    background: #fff;
    text-align: left;
    width: 150px;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(31, 127, 134);
}

.program-cat .program-desc .infant_prog {
   text-align: center;
   text-transform: uppercase;
}
<div class="row">
  <div class="col-md-3 program-cat">
    <img src="http://lorempixel.com/400/200/"/>
    <div class="program-desc">
      Short description of Aqua Aerobics comes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere, mi at pharetra tincidunt, odio ante eleifend ante, a aliquam odio urna nec nisl. Duis fermentum congue ultricies. Sed id aliquet augue.
      <a class="btn button" href="#">Learn to Swim</a>
      <div class="infant_prog"> <strong>Infants</strong> Program</div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions