CODEWITHSUNDEEP
htmlcss
Bernardo
Bernardo

Reputation: 23

Putting an image in above

I'm currently making a project which consists of a website that streams movies and tv shows, in the tv show section I want to insert a image to illustrate each episode. My idea is making a second image that shows which episode that image corresponds to and I'm having a little trouble putting the second image above the first one.

.episode-slidebackground {
    width: 950px;
    height: 220px;
    background: rgba(162, 162, 162, 0.24);
    float: left;
    margin-left: 15px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.episode-slidebackground img {
    width:182px;
    height:136px;
    float: left;
    margin-left: 7px;
    margin-top: 7px;
    margin-bottom: 5px;
    border-radius: 15px;
}


.episode-slideimgbackground{
width: 925px;
margin-left:10px;
margin-right:10px;
height:145px;
background: rgba(128, 128, 128, 0.24)
}

h1{
    font-size: 30px;
    color: #f2a223;
    font-weight: bold;
    margin-bottom: 30px;
    margin-top: 10px;

}
h2 {
    font-size: 15px;
    color: #f2a223;
    font-weight: bold;
}

h3 {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
}

h4 {
    font-size: 14px;
    color: #f3b12b;
    font-weight: bold;
}

h5 {
    font-size: 12px;
    color: white;

}

h6 {
    font-size: 20px;
    color: white;
    padding-left: 5px;
    padding-top: 5px;
}
<div class="episode-slidebackground">
                <h6>Temporada:1 2 3 4 5 6</h6> <br>
                <h2>Episódios:</h2>
                <div class="episode-slideimgbackground">
                <img src="img/1.jpg">
                <img src="img/2.jpg">
                <img src="img/3.jpg">
</div>
                </div>

This is the page without the second image:
this is the page without the second image

Upvotes: 2

Views: 65

Answers (2)

Adjit
Adjit

Reputation: 10305

You need to try and work with CSS's position attribute. This will enable you to have more control over your elements.

The two position attribute's you need to make use of are absolute and relative.

Basically, if you have a div that is set to position: relative that means that you can adjust that div's position without changing the layout of your webpage. It also means that any children elements of that div with the position: absolute can be positioned anywhere inside of that relative div.

.videoContainer {
  position: relative;
  height: 200px;
  width: 200px;
}

.videoImage, .videoCaption {
  position: absolute;
  color: white;
}

.videoCaption {
  bottom: 0;
  height: 50px;
  background: Gray;
  width: 100%;
}
<div class="videoContainer">
  <img class="videoImage" src="http://placehold.it/200x200"/>
  <div class="videoCaption">Some Caption</div>
</div>

Upvotes: 1

axrami
axrami

Reputation: 177

You need to set the z-index this is an css attribute that determines which element is on top

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Upvotes: 0

Related Questions