如何在我的图像上显示文字？

时间：2017-11-17 07:27:05

标签： html css image text hover

到目前为止，我已经按照我喜欢的方式编写了代码（这个网站正在进行中），我意识到当我将光标悬停在图像上时，我需要在图像上显示文本。我是一名新手，我的代码中有很多内容让我感到非常困惑，我第一次去论坛。

这是html：

＆＃13;
＆＃13; 
.img-single {
  width: 550px;
  height: 367px;
  float: left;
  margin: 40px 15px;
  position: relative;
}

.img-single img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
}

.img-single img:hover {
  width: 110%;
  height: 110%;
  position: absolute;
  top: -5%;
  left: -5%;
}

.img-single:hover {
  z-index: 1000;
}

.wrapper {
  width: 1160px;
  margin: 0 auto;
}

.port-box {
  overflow: hidden;
  padding; 80px 0px;
}
＆＃13; 
<body>
  <nav>
    <ul>
      <li><a href="home.html"> Home </a></li>
        <a href="home.html"><div class="logo"></div></a>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn active">My Work</a>
        <div class="dropdown-content">
          <a href="#">Cars</a>
          <a href="#">Dogs</a>
          <a href="#">Landscapes</a>
          <a href="#">Concerts</a>
          <a href="#">Nature</a>
          <a href="#">Misc</a>
        </div>
      <li><a href="about.html"> About me </a></li>
      <li><a href="contact.html"> Contact Me </a></li>
    </ul>
  </nav>
  <main>
    <div class="port-box">
      <div class="wrapper">
        <a href="cars.html">
          <div class="img-single">
            <img src="images/hud.jpg">
          </div>
        </a>
        <a href="dogs.html">
          <div class="img-single">
            <img src="images/rocky.jpeg">
          </div>
        </a>
        <a href="landscapes.html">
          <div class="img-single">
            <img src="images/sunset.jpg">
          </div>
        </a>
        <a href="concerts.html">
          <div class="img-single">
            <img src="images/concert.jpeg">
          </div>
        </a>
        <a href="nature.html">
          <div class="img-single">
            <img src="images/nature.jpg">
          </div>
        </a>
        <a href="misc.html">
          <div class="img-single">
            <img src="images/misc.jpeg">
          </div>
        </a>
      </div>
    </div>
  </main>
  <div class="footer">
  Copyright &copy; 2017 Richard Spradling
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

我意识到已经存在悬停效果，我想用文字出现替换它。谢谢。

3 个答案:

答案 0 :(得分：1)

添加了一个div覆盖，其中包含绝对位置和文本。如果您在悬停时查找有效的文字，

.img-single {
  width: 550px;
  height: 367px;
  float: left;
  margin: 40px 15px;
  position: relative;
}

.img-single img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
}

.img-single:hover {
  z-index: 1000;
}

.wrapper {
  width: 1160px;
  margin: 0 auto;
}

.port-box {
  overflow: hidden;
  padding;
  80px 0px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.img-single:hover .overlay {
  opacity: 1;
}
<nav>
  <ul>
    <li><a href="home.html"> Home </a></li>
    <a href="home.html">
      <div class="logo"></div>
    </a>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn active">My Work</a>
      <div class="dropdown-content">
        <a href="#">Cars</a>
        <a href="#">Dogs</a>
        <a href="#">Landscapes</a>
        <a href="#">Concerts</a>
        <a href="#">Nature</a>
        <a href="#">Misc</a>
      </div>
      <li><a href="about.html"> About me </a></li>
      <li><a href="contact.html"> Contact Me </a></li>
  </ul>
</nav>
<main>
  <div class="port-box">
    <div class="wrapper">
      <a href="cars.html">
        <div class="img-single">
          <img src="http://via.placeholder.com/350x150">
          <div class="overlay">
            <div class="text">This Is My First Pic</div>
          </div>
        </div>
      </a>
      <a href="dogs.html">
        <div class="img-single">
          <img src="http://via.placeholder.com/350x150">
          <div class="overlay">
            <div class="text">This Is My Second Pic</div>
          </div>
        </div>
      </a>
      <a href="landscapes.html">
        <div class="img-single">
          <img src="http://via.placeholder.com/350x150">
          <div class="overlay">
            <div class="text">This Is My Third Pic</div>
          </div>
        </div>
      </a>
      <a href="concerts.html">
        <div class="img-single">
          <img src="http://via.placeholder.com/350x150">
          <div class="overlay">
            <div class="text">This Is My Fourth Pic</div>
          </div>
        </div>
      </a>
      <a href="nature.html">
        <div class="img-single">
          <img src="http://via.placeholder.com/350x150">
          <div class="overlay">
            <div class="text">This Is My Fifth Pic</div>
          </div>
        </div>
      </a>
      <a href="misc.html">
        <div class="img-single">
          <img src="http://via.placeholder.com/350x150">
          <div class="overlay">
            <div class="text">This Is My Sixth Pic</div>
          </div>
        </div>
      </a>
    </div>
  </div>
</main>
<div class="footer">
  Copyright &copy; 2017 Richard Spradling
</div>

答案 1 :(得分：0)

首先，您应该通过为父div添加position：relative和文本添加position：absolute并在加载时隐藏它来将文本放在图像上。

当悬停在父div上显示文本时。 

.img-single {
  position: relative;
}  

.img-single .text {
  position: absolute;
  bottom: 0;
  left: 0;      
  display: none;
}

.img-single:hover .text {
  display: block;
}

以下是工作代码

＆＃13;
＆＃13; 
.img-single {
  width: 400px;
  float: left;
  margin: 40px 15px;
  position: relative;
}
.img-single img {
  width: 100%;
  min-height: 100px;
}

.img-single .text {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 30px;
  color:#fff;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  display: none;
}


.img-single:hover .text {
  display: block;
}


.wrapper {
  width: 1160px;
  margin: 0 auto;
}

.port-box {
  overflow: hidden;
  padding;
  80px 0px;
}
＆＃13; 
<nav>
  <ul>
    <li><a href="home.html"> Home </a></li>
    <a href="home.html">
      <div class="logo"></div>
    </a>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn active">My Work</a>
      <div class="dropdown-content">
        <a href="#">Cars</a>
        <a href="#">Dogs</a>
        <a href="#">Landscapes</a>
        <a href="#">Concerts</a>
        <a href="#">Nature</a>
        <a href="#">Misc</a>
      </div>
      <li><a href="about.html"> About me </a></li>
      <li><a href="contact.html"> Contact Me </a></li>
  </ul>
</nav>
<main>
  <div class="port-box">
    <div class="wrapper">
      <a href="cars.html">
        <div class="img-single">
          <img src="http://lorempixel.com/400/200/" alt="img">
          <span class="text">Some text</span>
        </div>
      </a>
    </div>
  </div>
</main>
<div class="footer">
  Copyright &copy; 2017 Richard Spradling
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以在图片上没有悬停时使用display: none;，并且当图片悬停时使用display: block;

＆＃13;
＆＃13; 
.img-single {
  width: 550px;
  height: 367px;
  float: left;
  margin: 40px 15px;
  position: relative;
}

.img-single img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
}

.img-single img:hover {
  width: 110%;
  height: 110%;
  position: absolute;
  top: -5%;
  left: -5%;
}

.img-single:hover {
  z-index: 1000;
}

.wrapper {
  width: 1160px;
  margin: 0 auto;
}

.port-box {
  overflow: hidden;
  padding;
  80px 0px;
}

.textimg {
  display: none;
  position: absolute;
  top: 50%;
  right: 50%;
}

.img-single:hover .textimg {
  display: block;
}
＆＃13; 
<nav>
  <ul>
    <li><a href="home.html"> Home </a></li>
    <a href="home.html">
      <div class="logo"></div>
    </a>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn active">My Work</a>
      <div class="dropdown-content">
        <a href="#">Cars</a>
        <a href="#">Dogs</a>
        <a href="#">Landscapes</a>
        <a href="#">Concerts</a>
        <a href="#">Nature</a>
        <a href="#">Misc</a>
      </div>
      <li><a href="about.html"> About me </a></li>
      <li><a href="contact.html"> Contact Me </a></li>
  </ul>
</nav>
<main>
  <div class="port-box">
    <div class="wrapper">
      <a href="cars.html">
        <div class="img-single">
          <img src="images/hud.jpg">
          <div class="textimg">Text</div>
        </div>
      </a>
      <a href="dogs.html">
        <div class="img-single">
          <img src="images/rocky.jpeg">
          <div class="textimg">Text</div>
        </div>
      </a>
      <a href="landscapes.html">
        <div class="img-single">
          <img src="images/sunset.jpg">
          <div class="textimg">Text</div>
        </div>
      </a>
      <a href="concerts.html">
        <div class="img-single">
          <img src="images/concert.jpeg">
          <div class="textimg">Text</div>
        </div>
      </a>
      <a href="nature.html">
        <div class="img-single">
          <img src="images/nature.jpg">
          <div class="textimg">Text</div>
        </div>
      </a>
      <a href="misc.html">
        <div class="img-single">
          <img src="images/misc.jpeg">
          <div class="textimg">Text</div>
        </div>
      </a>
    </div>
  </div>
</main>
<div class="footer">
  Copyright &copy; 2017 Richard Spradling
</div>
＆＃13;
＆＃13;
＆＃13;

我已将此添加到您的代码中： 在CSS中：

.textimg {
    display:none;  
    position: absolute;
    top:50%;
    right:50%;
}

.img-single:hover .textimg {
  display:block;
}

HTML：

<div class="img-single">
          <img src="images/misc.jpeg">
          <div class="textimg">Text</div>
</div>
相关问题
最新问题