Line and button placement on top of images

[c0d3d]

Hello, I am trying to put a line and a button over a picture and was wondering if anyone could point out to me what I am doing wrong. The idea is to put the line on the picture(the current one on codepen is temp) pointing to a part of an image with a button on top of that will popup information(popup and button works).
Here is the mainline function:
.vl {
position: absolute;
border-left: 6px solid red;
height: 200px;
}
Here is the gallery functions for the picture:
.gallery {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: left;
justify-content:center;
background-color: grey;
}

.gallery-item {
margin: 20px;
}

.gallery-item div.thumbnail {
border: 25px solid black;
border: 5px solid white;
background-color: black;
}
Here is the html implementation:

<

div class=”gallery”>

  <figure class="gallery-item">
    <div class="thumbnail">
    <img src="mitosis1.png">
    <div class="vl"></div>   
    </div>
            <div class="popup"><a class="thirdButton">Mitosis</a>
            <span class="popuptext" id="myPopup">Popup</span>
            </div>
  </figure>

Here is a codepen demo: https://codepen.io/c0d3d1/pen/zYYPrPy
Tell me if you need anything else as I have been having quite the headache figuring this out!

[uxfed]

I think I see what you’re trying to do with the line, but not the button. Anyway I think I’ve inferred enough to give you some starting advice.

• What you’ve started doing with the position: absolute style is correct – you’ll need that to position your lines in the correct spots. One extra step you’ll need though is to set position: relative on the .thumbnail element. This says that the line will be absolutely positioned relative to the thumbnail element.
• Then on the lines, set top and left styles. You’ll want to work in percentages rather than pixels to account for responsiveness.

[c0d3d]

Thank you so much! That makes more sense now lol. Sorry about the confusion I will make a separate button for going on the image.

[Author]

Posts