如何在img链接悬停上显示文字？

时间：2017-09-06 15:52:23

标签： html css bootstrap-4

我已经尝试过其他用户向Stackoverflow上的用户提出的方法，他们或多或少地提出了同样的问题，但是尽管我的代码使用了相同的方法，但文本最终显示在img下面。

我也遵循这个方法：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade但同样的事情发生了。

＆＃13;
＆＃13; 
html,
body {
  font-family: ;
  margin: 0 auto;
  padding: 10px;
  text-transform: none;
  font-family: europa;
  font-weight: 400;
  font-style: normal;
  line-height: 1.3em;
  letter-spacing: 0em;
  text-transform: none;
  color: #000;
}

.header h1 {
  background-color: ;
  margin: 0 auto;
  padding: 10px;
  display: inline-block;
  font-size: 15px;
  letter-spacing: 0.8px;
}

.header .nav {
  float: right;
  display: inline-block;
  padding: 10px;
  font-size: 15px;
  letter-spacing: 0.8px;
}

.header .nav a {
  font-family: Europa;
  color: black;
  padding: 15px;
  text-decoration: none;
}

.row {
  margin: 0 auto;
  display: inline-block;
}

.container-fluid {
  padding: ;
  margin: 0 auto;
}

#text {
  font-family: europa;
  font-weight: 400;
  font-style: normal;
  font-size: 3em;
  line-height: 1.3em;
  letter-spacing: 0em;
  text-transform: none;
  color: #000;
  width: 50%;
  padding: 10px;
}

.col-md-6 {
  margin: 0 auto;
  width: 50%;
  float: left;
  text-align: center;
  padding: 10px;
  background-color: #fff;
  height: 100%;
}

.col-md-6 .wrapper {
  padding: 0;
  border: 0px solid black;
}

.col-md-6 .wrapper img {
  max-width: 100%;
  max-height: 100%;
}

.col-md-6 .wrapper img:hover {
  opacity: 0.6;
  transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
}

@media only screen and (max-width: 800px) {
  .col-md-6 {
    float: none;
    background-color: none;
    display: inline-block;
    padding: 10px;
    margin: 0;
    width: 100%;
  }
  #text {
    float: none;
    display: inline-block;
    padding: 10px;
    margin: 0;
    width: 100%;
  }
  .header .nav {
    display: inline-block;
    padding: 10px;
    margin: 0;
  }
  .header .nav a {
    padding-left: 0;
  }
  .header h1 {
    display: inline-block;
    padding: 10px;
    margin: 0;
  }
}

@media only screen and (max-width: 400px) {
  .col-md-6 {
    float: none;
    background-color: none;
    display: inline-block;
    padding: 10px;
    margin: 0;
    width: 100%;
  }
  #text {
    float: none;
    display: inline-block;
    padding: 10px;
    margin: 0;
    width: 100%;
  }
  .header .nav {
    display: inline-block;
    padding: 10px;
    margin: 0;
    width: 100%;
  }
  .header .nav a {
    padding-left: 0;
  }
  .header h1 {
    display: inline-block;
    padding: 10px;
    margin: 0;
    width: 100%;
  }
  span.text-content {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    display: table;
    height: 150px;
    left: 0;
    position: absolute;
    top: 0;
    width: 150px;
  }
  span.text-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .img-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .img-list {
    display: inline-block;
    height: 150px;
    margin: 0 1em 1em 0;
    position: relative;
    width: 150px;
  }
  span.text-content {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    display: table;
    height: 150px;
    left: 0;
    position: absolute;
    top: 0;
    width: 150px;
    opacity: 0;
  }
  .img-list:hover span.text-content {
    opacity: 1;
  }
  span.text-content {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    display: table;
    height: 150px;
    left: 0;
    position: absolute;
    top: 0;
    width: 150px;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
  }
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="animate.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="style.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Merriweather|Europa">

</head>

<body>

  <div class="header">
    <div class="container-fluid">
      <h1 id="firstName">Header</h1>
      <div class="nav">
        <a href="#">About</a>
        <a href="#">Work</a>
        <a href="#">Photo</a>
        <a href="#">Blog</a>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <h1 id="text">Design &amp; code.</h1>
    <div class="col-md-6">
      <div class="wrapper">
        <a href="">
          <img src="http://via.placeholder.com/350x150">
        </a>
      </div>
    </div>

    <div class="col-md-6">
      <div class="wrapper">
        <a href="#">
          <img src="http://via.placeholder.com/350x150" />
        </a>
      </div>
    </div>
    <div class="col-md-6">
      <div class="wrapper">
        <div class="img-list">

          <a href="#">
            <img src="http://via.placeholder.com/350x150" />
            <span class="text-content"><span>Place Name</span></span>
          </a>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="wrapper">

        <a href="#">
          <img src="http://via.placeholder.com/350x150" />
        </a>

      </div>
    </div>


  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

我认为当屏幕宽度小于或等于400px时，您的代码可以正常工作。

这是因为您在媒体查询下设置了相关的样式：

@media only screen and (max-width: 400px) {

/* Your styles related to displaying the text are here*/

}

注意：不要忘记关闭媒体查询。它们未在您发布的代码中关闭。

答案 1 :(得分：0)

我删除了所有不必要的代码，以便明确您需要添加的内容。基本上在悬停时我们将.caption不透明度更改为1。绝对位于.wrapper内，<span>内有文字。

＆＃13;
＆＃13; 
.wrapper>a {
  position: relative;
  z-index: 0;
  display: block;
}

.wrapper>a>img {
  width: 100%;
}

.caption {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s;
  color: white;
  background: rgba(0, 0, 255, 0.5);
  opacity: 0;
}

.caption>span {
  font-size: 48px;
}

.wrapper > a:hover .caption {
  opacity: 1;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="col-md-6">
  <div class="wrapper">
    <a href="#">
      <div class='caption'>
        <span>Text on hover</span>
      </div>
      <img src="http://via.placeholder.com/350x150" />
    </a>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

创建要显示的文本相对于图像链接的位置，然后使用以下代码：

<div id="wrapper">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>
import { ActivatedRoute, UrlSegment } from '@angular/router';

constructor( route: ActivatedRoute) {}

getRoutes() { const segments: UrlSegment[] = this.route.snapshot.url; }

我想我明白你在找什么......

相关问题
最新问题