Not able to change span height and width inside image tag

Question

I have referred this question but it dint help me out . I am trying to change span tags height and width inside image tag but it's not working and this is my code:

html

<img class="profile_pic" alt="Sumanth Jois" src="file/someimage">
           <span  class="changePicture">HelloThere</span>     
 </img>

Css

     //There are many spans so I am using the . operator to specify
     span.changePicture{
        width: 100px;
       height:200px;
       background-color:red;
        margin-left: -150px;
        color: white;
        margin-top: -20px;
     }

I am not able to change the width and height using this code.Can I know how I can solve this?

ThankYou

Possible duplicate of [Does height and width not apply to span?](http://stackoverflow.com/questions/2491068/does-height-and-width-not-apply-to-span) — Dr. Stitch, May 16 '16 at 03:37
The browser won't nest the `span` inside the `img`, because an `img` cannot be a parent. The browser will place it below the `img` instead, and ignore/delete the `` — 4castle, May 16 '16 at 03:40

Ani Menon · Accepted Answer · 2016-05-16T04:56:01.897

First, span is a single line element. So no height.

Second, image is not : <img> </img>

Image tag is a single tag <img />

Try using a div instead of the span. And may be add span within it.

span is by default an inline element which cannot take width and height properties but you may use display: block; or display: inline-block; to set height/width to it.

Snippet to overlay span over image :

div {
  top: 10px;
  left: 20px;
  position: absolute;
  color: #FFF;
}

<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="image" />

<div>
  <H1>Text </H1>
</div>

ThankYou but i want to overlay div tag over Image tag how can i do that — KeyStroke, May 16 '16 at 04:34

winresh24 · Answer 2 · 2016-05-16T04:44:58.757

First of all the way you use img tag was wrong the html must be like this:

<img class="profile_pic" alt="Sumanth Jois" src="file/someimage" />
           <span  class="changePicture">HelloThere</span>

and just add display:block; to css to set height and width

 span.changePicture{
        width: 100px;
       height:200px;
       background-color:red;
        margin-left: -150px;
        color: white;
        margin-top: -20px;
        display:block; /*added*/
     }

EDITED:

To do that you need to put the image into div like this one:

<div class="container">
    <div class="background-img">
          <img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT_1tKSY61_ZLpmpR0PWO784otZulHIMgrNLECJ-Te8HwvqoXMJZv8GYDo" alt="Generic placeholder image">
                  <div class="overlay">
                  <span>Text</span>
                  </div>
     </div>            
</div>

Here is the css:

.background-img .overlay{
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.background-img .overlay {
    opacity: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 51, 51, 0.5);
}
.container{position:relative;
  max-width:300px;
  }

.container img{width:100%;
display:block;
 }

Here is the jsfiddle: DEMO

Thankyou it works but i want span to visible on image which is not happening — KeyStroke, May 16 '16 at 03:59

Not able to change span height and width inside image tag

2 Answers2