0

I'm new to CSS and I am working on a blog project for class. I am trying to have it so that I have a picture with text over it on the bottom of the picture. I 'm trying to have it so that both the picture and text are clickable. for some reason it seems like the picture is pushing down the text box and I cant figure out why.

    #container{
        display: grid;
        height: 87vh;
        width: 100vw;
        grid-template-columns: 40vw 25vw 25vw;
        grid-template-rows: 42.5vh 42.5vh;
        grid-template-areas: 
        "left middle right"
        "left middleRight bottomRight";
        grid-gap: 10px;
        padding: 1px;
        justify-content: left;
        background-color: thistle;
    }

#MainblogPost{
    border:solid;
    border-color: grey;
    height: 86vh;
}
#image{
    width: 100%;
    height: 100%;
}
#blogLink{
    display: grid;
    position: absolute;
    bottom: 50px;
    font-size: 20px;
    color: turquoise;
}

HTML

    <div id="container">
        <div id = "MainblogPost">
            <a  href="google.com"><img id="image" src="resources/ironman.jpg"/>
            <a  href="google.com" id ="blogLink">Iron man</a>
            </a>
        </div>
MightyPaladin
  • 45
  • 5
  • Hi Paladin, If you only want to archive to open "google.com" when you click on your image, same as on your text, this can be done easily. Note: target:"_blank" will open your link in the new tab in the Browser. If you need something different, please specify. – Marko Sikman Mar 07 '21 at 19:00

2 Answers2

-1

As per your title I guess that you mean to display your text over an image... For that do use this

#image{
z-index: -10; 
}
#bloglink{
z-index: 10000;
}

Basically what z-index does is overlaying the object or organising the objects in a 3d order overlaying it to over or in the element.. Do leave a comment if you have any more problems

Krishnab Sarkar
  • 1
  • 1
  • 2
-2

I Think You Can Use The <br/> Tag To Make The Text Go Below The Image.

The Empty String Photographer
  • 127
  • 12