Html - Text not able to appear on top of images on my website

Eddie
March 4, 2024
148 views
0 votes
2 Answers

I am trying to add a title over each one of my images on the index page upon hovering over each image.
However everything I try does not work. I am using a website template as it is for school and must follow this template. Here is the current code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Ed Raynsford | Projects Grid</title>
    <link href="style.css" rel="stylesheet">    
    <style></style>
</head>
<body>

<div class="container">

<nav>
    <h1><a href="index.html">Ed Raynsford</a></h1> 
    <ul>
        <li><a href="index.html">Projects</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav> <!-- end nav -->


<h2>Hi I'm Ed <br>this is my website so check out my work!</h2>


<section class="projects">

    <figure class="one">
        <a href="project_01.html"><img src="image/zine_thumbnail.jpg" alt="Picture of open book displaying zine work" ></a>
        <div class = "zine">zine</div>
    </figure>

    <figure class="two">
        <a href="project_02.html"><img src="image/webdev_thumbnail.jpg" alt="image description" ></a>
        <div class="web">Webdevlopment</div>
    </figure>

    <figure class="three">
        <a href="project_03.html"><img src="image/UI_thumbnail.jpg" alt="image description" ></a>
    </figure>
    
    <figure class="four">
        <a href="project_04.html"><img src="image/motion_thumbnail.jpg" alt="image description" ></a>
    </figure>

</section> <!-- end section -->


</div> <!-- end of container -->

</body>
</html>

CSS:
/*  all the em measurements start from this setting
--------------------------------------------------------------------------------------- */
html { font-size: 16px; }


/*  global styles to reset default values
--------------------------------------------------------------------------------------- */
*,
*:before,
*:after { box-sizing: border-box; }

body, div, ul, li, img, video, section, figure, figcaption, main, footer, 
h1, h2, h3, p, a { margin: 0; padding: 0; border: 0; }

body { background: #3f5f43; }


/*  this sets page width: 60em = 960px,  80 = 1280px, 90 = 1440px
--------------------------------------------------------------------------------------- */
.container { max-width: 90rem; }
.container { margin: 0 auto; background: #3f5f43; }


/* example web font styles using IBM Plex Sans
--------------------------------------------------------------------------------------- */
@font-face {
    font-family: Plex;
    src: url(fonts/IBM-Plex-Sans/IBMPlexSans-Regular.woff2);
    font-weight: normal;
}

@font-face {
    font-family: Plex-Bold;
    src: url(fonts/IBM-Plex-Sans/IBMPlexSans-Bold.woff2);
    font-weight: bold;
}

@font-face {
    font-family: Plex-Italic;
    src: url(fonts/IBM-Plex-Sans/IBMPlexSans-Italic.woff2);
}


body        { font-family: Plex, Arial, sans-serif; }
h1, h2, h3  { font-family: Plex-Bold, Arial, sans-serif; }
p           { font-family: Plex, Arial, sans-serif; }
figcaption  { font-family: Plex-Italic, Arial, sans-serif; }


/*  top navigation section
--------------------------------------------------------------------------------------- */
nav     { padding: .5rem .5rem 2rem .5rem; min-height: 2rem; border-bottom: 2px #eee solid; }
nav h1  { font-size: 1.4rem; margin-bottom: .5rem; }
nav a   { white-space: nowrap; }

nav ul      { list-style-type: none; }
nav ul li   { font-size: .75rem; display: inline-block; margin-right: 1.5rem; }


/*  main page title after top navigation
nav + h2 selects first <h2> after <nav>
--------------------------------------------------------------------------------------- */
nav + h2 { 
    font-size: rem;
    color: #dbd2c1;
    line-height: 2.15rem;
    margin: 1rem .5rem 3rem;
}

/*  hero image
.container > figure selects all <figure> where parent is .container
--------------------------------------------------------------------------------------- */
.container > figure { margin: 0 .5rem 2rem .5rem; }


/*  main content: note padding on section
--------------------------------------------------------------------------------------- */
section { margin:0; padding: 0 .5rem 1.5rem; }

section h3, section div h3 { font-size: 1.5rem; line-height: 2.25rem; }

h3 {
    color: #dbd2c1;
}

.projects figure img {
    border-radius: 2%;
}

section figure { margin-bottom: 1rem; }

figure {
    overflow: hidden;
}



section figcaption { font-size: 1rem; }

section div { margin-top: -0.375rem; }  /* to adjust type against images */


/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; } /* max-width sets line length */
p { font-size: 1.5rem; line-height: 1.375em; }
/* p { line-height: 2.0625rem; } */ 


/*  media defaults to force image & video width to parent element width
--------------------------------------------------------------------------------------- */
img     { width: 100%; height: auto; }

video   { width: 100%; }

.max    { max-width: 100%; }  /* max-width can stop img element going bigger than its actual size */


/*  link styling
--------------------------------------------------------------------------------------- */
a           { color: #00e; text-decoration: none; }
a:visited   { color: #00e; }
a:active    { color: #0e0; }

nav a           { color: #00e; text-decoration: none; }
nav a:visited   { color: #00e; }
nav a:active    { color: #0e0; }

nav a           { color: rgb(39, 39, 39); text-decoration: none; }
nav a:visited   { color: #dbd2c1;; }
nav a:hover     { color: #dbd2c1;; }

nav a {
    -webkit-transition: color 1s;
    transition: color 1s;
}
nav a:hover {
    color: #faad1b;
}

nav ul li {
    color: #faad1b;
    position: relative;
    text-decoration: none;
  }
  
  nav ul li::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: #faad1b;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }
  
  nav ul li:hover::before {
    transform-origin: left;
    transform: scaleX(1);
  }
.contact p { font-size: 3rem; text-align: center; }

/* Project image effects */
.projects figure img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}
.projects figure:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    border-radius: 19%;
}

.projects figure img {
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.projects figure:hover img {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.zine { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
 }




/* 
IMPORTANT: media query - switches on grid layout if page width is wider than 768px
--------------------------------------------------------------------------------------- */
@media (min-width: 768px) {


/*  IMPORTANT: min-width:60em rule will stop the container from resizing  
60rem = 960px
90rem = 1440px
--------------------------------------------------------------------------------------- */
    .container { min-width: 60rem; min-width: 0; }

    .force-height { min-height: 100vh; }


/*  top navigation grid
--------------------------------------------------------------------------------------- */  
    nav {
        display: grid;
        grid-template-columns: 1fr auto;
        background: #3f5f43;
        border-bottom: 0 #eee none;
    
    }

    nav h1  { font-size: 1.4rem; margin-bottom: .5rem; margin-top: 0; }

    nav ul { margin: 0; }
    nav ul li { font-size: 1.4rem; margin: 0 0 0 1.25rem; }


/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
    .container > h2 { 
        font-size: 3rem;
        line-height: 1.15em;
        margin: 3rem auto 4rem;
        text-align: left;
    }


/*  hero image
--------------------------------------------------------------------------------------- */
    h2 + figure { margin: 0; padding-bottom: 3rem; }
    h2 + figure img { display: block; }


/*  default desktop section styles
--------------------------------------------------------------------------------------- */
    section { padding: 0 .5rem 4rem; }

    section figure { margin: 0; }

    section h3 { margin-bottom: .5em; }


/*  section default 12 column grid
--------------------------------------------------------------------------------------- */
    section { 
        display: grid; 
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: minmax(2.5rem, auto);
        grid-column-gap: 1.5rem;
        grid-row-gap: 0.625rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
        grid-row-gap: 0;
        grid-template-areas:
        "hd hd hd hd hd hd hd hd hd hd hd hd"
        "fg fg fg fg dv dv dv dv dv dv dv dv";
    }

    section h3      { grid-area: hd; }
    section figure  { grid-area: fg; }
    section div     { grid-area: dv; }


/*  simple 3 column grid
--------------------------------------------------------------------------------------- */
    section.three {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 2rem auto;
        grid-column-gap: 3rem;
        grid-row-gap: .5rem;
        grid-template-areas:
        "fg hd hd"
        "fg dv dv";
    }

    section.three h3        { grid-area: hd; }
    section.three figure    { grid-area: fg; }
    section.three div       { grid-area: dv; }
    
    section.three h3        { margin-top: -0.6rem; }
    section.three div       { margin-top: 0; }


/*  3 column grid with right hand image
--------------------------------------------------------------------------------------- */  
    section.right {
        display: grid;
        grid-template-columns: 1fr 1fr minmax(20rem, 1fr);
        grid-template-rows: minmax(2rem, auto) auto;
        grid-column-gap: 1.5rem; grid-column-gap: 4rem;
        grid-row-gap: 0; grid-row-gap: 0rem;
        grid-template-areas:
        "hd hd fg"
        "dv dv fg";
    }
    
    section.right h3        { grid-area: hd; }
    section.right figure    { grid-area: fg; }
    section.right div       { grid-area: dv; }

    section.right h3        { margin-top: 0; }
    section.right div       { margin-top: 0; }


/*  wide right hand image spanning two columns
--------------------------------------------------------------------------------------- */
    section.wide {
        display: grid;
        grid-template-columns: minmax(10rem, 1fr) 1fr 1fr;
        grid-template-rows: minmax(2.5rem, auto);
        grid-column-gap: 1.5rem;
        grid-row-gap: 0;
        grid-template-areas:
        "hd fg fg"
        "dv fg fg";
    }
    
    section.wide h3     { grid-area: hd; }
    section.wide figure { grid-area: fg; }
    section.wide div    { grid-area: dv; }



/*  intro
--------------------------------------------------------------------------------------- */
    section.intro {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-column-gap: 1.5rem;  
        grid-row-gap: 0;
        grid-template-areas:
        "dv dv dv";
    }

    section.intro h3    { grid-area: hd; }
    section.intro div   { grid-area: dv; }

    section.intro div h3,
    section.intro div p { font-size: 2rem; }

    section.intro       { margin-bottom: 4rem; }


/*  images-two
--------------------------------------------------------------------------------------- */
    section.images-two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-column-gap: 0; 
        grid-row-gap: 1rem;
        grid-template-areas:
        "f1 f2"
        "hd hd"
        "dv dv";
    }

    section.images-two h3                       { grid-area: hd; }
    section.images-two figure                   { grid-area: f1; }
    section.images-two figure:nth-of-type(2)    { grid-area: f2; }
    section.images-two div                      { grid-area: dv; }

    section.images-two div h3,
    section.images-two div p { font-size: 1.5rem; }


/*  images-three
--------------------------------------------------------------------------------------- */
    section.images-three {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-column-gap: 2rem; 
        grid-row-gap: 1rem;
        grid-template-areas:
        "f1 f2 f3"
        "hd hd hd"
        "dv dv dv";
    }

    section.images-three h3                     { grid-area: hd; }
    section.images-three figure                 { grid-area: f1; }
    section.images-three figure:nth-of-type(2)  { grid-area: f2; }
    section.images-three figure:nth-of-type(3)  { grid-area: f3; }
    section.images-three div                    { grid-area: dv; }

    section.images-three div h3,
    section.images-three div p { font-size: 1.5rem; }


/*  images-three-plus
--------------------------------------------------------------------------------------- */
    section.images-three-plus {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-column-gap: 2rem; 
        grid-row-gap: 2rem;
        grid-template-areas:
        "f1 f2 f3"
        "d1 d2 d3";
    }

    section.images-three-plus figure                { grid-area: f1; }
    section.images-three-plus figure:nth-of-type(2) { grid-area: f2; }
    section.images-three-plus figure:nth-of-type(3) { grid-area: f3; }
    section.images-three-plus div                   { grid-area: d1; }
    section.images-three-plus div:nth-of-type(2)    { grid-area: d2; }
    section.images-three-plus div:nth-of-type(3)    { grid-area: d3; }

    section.images-three-plus       { padding: 0 0 2rem; }

    section.images-three-plus div h3,
    section.images-three-plus div p { font-size: 1.5rem; }


/* full width - note grid on figure not section
--------------------------------------------------------------------------------------- */
    section.full { display: block; padding: 1rem 0 0; }

    section.full figure {
        grid-area: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 0;
        grid-template-areas:
        "f1"
        "im";
    }

    section.full figure img         { grid-area: im; }
    section.full figure figcaption  { grid-area: f1; justify-self: center; }

    section.full                    { margin-bottom: 4rem; }
    section.full figure img         { display: block; }
    section.full figcaption h3      { font-size: 3rem; }


/* two columns
--------------------------------------------------------------------------------------- */
    section.two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(2.5rem, auto);
        grid-column-gap: 1.5rem;
        grid-row-gap: 0;
        grid-template-areas:
        "fg hd"
        "fg dv";
    }


/* two columns right image
--------------------------------------------------------------------------------------- */
    section.two-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(2.5rem, auto);
        grid-column-gap: 1.5rem;
        grid-row-gap: 0;
        grid-template-areas:
        "hd fg"
        "dv fg";
    }


/* pull quote
--------------------------------------------------------------------------------------- */
    section.pull {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-column-gap: 0;
        grid-row-gap: 0;
        grid-template-areas:
        "dv";
    }

    section.pull { margin-bottom: 4rem; }

    .pull p { font-size: 2rem; }


/* out of background
--------------------------------------------------------------------------------------- */
    section.colourbox {
        padding: 3rem;
        margin-bottom: 4rem;
    }

    .orange {
        background:#aaa;
    }


/*  custom section about page
--------------------------------------------------------------------------------------- */
    section.about {
    display: grid;
    grid-template-columns: minmax(24rem, 5fr) 4fr 3fr;
    grid-template-rows: auto;
    grid-column-gap: 1.5rem;
    grid-row-gap: 0;
    grid-template-areas:
    "fg dv dv";
    }


/*  section.video grid
--------------------------------------------------------------------------------------- */  
    section.video  {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        grid-column-gap: 0.5rem;
        grid-row-gap: 0;
        background: transparent;
        grid-template-areas:
        "v1 v1 v1 v1"
        "t2 t2 t2 t2";
    }

    section.video figure    { grid-area: v1; }
    section.video div       { grid-area: t2; }

    section.video figure    { padding:0; }
    section.video div       { background: transparent; }
    section.video p         { max-width: 32rem; color: #777; }
    section.video h3        { padding-top: 1rem; }


/*  home page auto grid
--------------------------------------------------------------------------------------- */      
section.home {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-areas:
    "h1 h1 h1"
    "h2 h3 h4";
}

section.home { padding: 0 .5rem 2rem; }

section.home figure.one   { grid-area: h1; }
section.home figure.two   { grid-area: h2; }
section.home figure.three { grid-area: h3; }
section.home figure.four  { grid-area: h4; }


/*  projects page auto grid
--------------------------------------------------------------------------------------- */      
section.projects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1rem;
    grid-template-areas:
    "f1 f2"
    "f3 f4";
}

.projects figure.one   { grid-area: f1; }
.projects figure.two   { grid-area: f2; }
.projects figure.three { grid-area: f3; }
.projects figure.four  { grid-area: f4; }


/*  project page reflection section
--------------------------------------------------------------------------------------- */      
section.reflection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1rem;
    grid-template-areas:
    "rh rh"
    "d1 d2";
}

section.reflection h3       { grid-area: rh; }
section.reflection div      { grid-area: d1; }
section.reflection div.two  { grid-area: d2; }

section.reflection div p a { display: block; }


} /* end 768px media query */


/*  for big screens - currently just for testing
--------------------------------------------------------------------------------------- */
@media (min-width: 18000px) {
    html { font-size: 24px; }
}

I have tried every tutorial and always get the same outcome of the text on the middle of the screen and never even on top of the image.

Tags: css html

Answers

I have updated two css in your CSS file. You can add other CSS as well. Please check below updated code:-

section figure {
    margin-bottom: 1rem;
    position: relative;
    width: 200px;
}
section figure img {
    width: 100%;
}
section figure div {
    position: absolute;
    width: 100%;
    color: white;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Ed Raynsford | Projects Grid</title>
    <link href="style.css" rel="stylesheet">    
    <style></style>
</head>
<body>

<div class="container">

<nav>
    <h1><a href="index.html">Ed Raynsford</a></h1> 
    <ul>
        <li><a href="index.html">Projects</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav> <!-- end nav -->


<h2>Hi I'm Ed <br>this is my website so check out my work!</h2>


<section class="projects">

    <figure class="one">
        <a href="project_01.html"><img src="https://dummyimage.com/600x400/000/fff" alt="Picture of open book displaying zine work" ></a>
        <div class = "zine">zine</div>
    </figure>

    <figure class="two">
        <a href="project_02.html"><img src="https://dummyimage.com/600x400/000/fff" alt="image description" ></a>
        <div class="web">Webdevlopment</div>
    </figure>

    <figure class="three">
        <a href="project_03.html"><img src="https://dummyimage.com/600x400/000/fff" alt="image description" ></a>
        <div class="web">Test</div>
        
    </figure>
    
    <figure class="four">
        <a href="project_04.html"><img src="https://dummyimage.com/600x400/000/fff" alt="image description" ></a>
        <div class="web">Test</div>
        
    </figure>

</section> <!-- end section -->


</div> <!-- end of container -->

</body>
</html>

Let me know if it works for you or not.

- MindBorn
- March 4, 2024 at 6:59 pm
- 0 votes
0
First you have to set position: relative for container. Then you can set position: absolute for caption elements. I added dynamic positioning so captions are always centered vertically. By dafault captions are hidden. Then on container’s hover you set opacity: 1 to show them. I also added white background for better visibility and a little opacity’s animation.

Try something like this:
```
.projects figure {
    position: relative;
}

.projects figure > div { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    left: 0; 
    width: 100%; 
    opacity: 0;
    background-color: #ffffff;
    text-align: center;
    transition: opacity 0.5s;
 }

 .projects figure:hover > div {
    opacity: 1;
 }
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Text not able to appear on top of images on my website

Answers