The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Line and button placement on top of images

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #298142

    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;
    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 class="popup"><a class="thirdButton">Mitosis</a>
                <span class="popuptext" id="myPopup">Popup</span>

    Here is a codepen demo:
    Tell me if you need anything else as I have been having quite the headache figuring this out!


    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.

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.