文字无法出现在我网站上的图像顶部

问题描述 投票：0回答：2

我试图在将鼠标悬停在每张图像上时在索引页上的每张图像上添加标题。 然而我尝试的一切都不起作用。我正在使用学校网站模板，并且必须遵循此模板。这是当前代码：

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; }
}

我已经尝试了每个教程，并且总是在屏幕中间得到相同的文本结果，甚至在图像顶部也没有得到相同的结果。

html css web web-development-server
2个回答
0
投票

我更新了您的 CSS 文件中的两个 css。您也可以添加其他 CSS。请检查下面更新的代码：-

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>

让我知道它是否适合您。

0
投票

首先你必须为容器设置

position: relative
。然后您可以为标题元素设置 
position: absolute
。我添加了动态定位，因此标题始终垂直居中。默认情况下，字幕是隐藏的。然后在容器悬停时设置 
opacity: 1
来显示它们。我还添加了白色背景以获得更好的可见性和一点不透明度的动画。

尝试这样的事情：

.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;
 }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.