如何在图像上制作文本并在鼠标悬停在图像上时显示它？

Question

我想在图像上制作文字。我想做像

这样的事情

当您将鼠标悬停在图像上时，我想显示此文本。

这是我目前的HTML＆amp; CSS

＆＃13;

＆＃13;

.moimage {
  width: 120px;
  height: 176px;
  float: left;
  display: inline-block;
}

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

.name {
  width: 100%;
  display: inline-block;
}

＆＃13;

<div class="molist">
  <img class="moimage" src="http://i.imgur.com/UU5q8FB.jpg">
  <ul class="wrapper">
    <li class="covercomment">
      <span class="cocom">2 Comments</span>
    </li>
    <li class="coverLinks">
      <span class="colin">2 Links</span>
    </li>
    <li class="coverviews">
      <span class="covedlin">60 Views</span>
    </li>
  </ul>
  <span class="name">Testing Name Here</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

<div class="molist">
  <img class="moimage" src="http://i.imgur.com/UU5q8FB.jpg">
  <ul class="wrapper">
    <li class="covercomment">
      <span class="cocom">2 Comments</span>
    </li>
    <li class="coverLinks">
      <span class="colin">2 Links</span>
    </li>
    <li class="coverviews">
      <span class="covedlin">60 Views</span>
    </li>
  </ul>
  <span class="name">Testing Name Here</span>
</div>

＆＃13;

IsDeleted

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

html,body {margin:0;}
.molist {float:left; position:relative; width: 120px; height: 176px; margin:0 20px 0 0;}
.wrapper {margin:0; padding:10px;  list-style:none;}
.moimage{
width:100%;
}
.f-cntc {position:absolute; left:0; top:0; background-color:rgba(0,0,0,0.6); color:#fff; width:100%; height:100%; display:none;}
.molist:hover .f-cntc{display:block;}

＆＃13;

<div class="molist">
  <img class="moimage" src="http://i.imgur.com/UU5q8FB.jpg">
  <div class="f-cntc">
	<ul class="wrapper">
	  <li class="covercomment">
 	    <span class="cocom">2 Comments</span>
	  </li>
  	  <li class="coverLinks">
	    <span class="colin">2 Links</span>
	  </li>
	  <li class="coverviews">
	    <span class="covedlin">60 Views</span>
	  </li>
	</ul>
		</div>
	<span class="name">Testing Name Here</span>
</div>	

<div class="molist">
  <img class="moimage" src="http://i.imgur.com/UU5q8FB.jpg">
  <div class="f-cntc">
	<ul class="wrapper">
	  <li class="covercomment">
 	    <span class="cocom">2 Comments</span>
	  </li>
  	  <li class="coverLinks">
	    <span class="colin">2 Links</span>
	  </li>
	  <li class="coverviews">
	    <span class="covedlin">60 Views</span>
	  </li>
	</ul>
		</div>
	<span class="name">Testing Name Here</span>
</div>

<div class="molist">
  <img class="moimage" src="http://i.imgur.com/UU5q8FB.jpg">
  <div class="f-cntc">
	<ul class="wrapper">
	  <li class="covercomment">
 	    <span class="cocom">2 Comments</span>
	  </li>
  	  <li class="coverLinks">
	    <span class="colin">2 Links</span>
	  </li>
	  <li class="coverviews">
	    <span class="covedlin">60 Views</span>
	  </li>
	</ul>
		</div>
	<span class="name">Testing Name Here</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

根据我对问题的理解，以下代码可帮助您实现目标。

.moimage{
  position: relative;
  width: 120px;
  height: 176px;
  float: left;
  display: inline-block;
}
.wrapper {
  list-style: none;
  position: absolute;
  color: #fff;
  padding: 10px;
  display: none;
}
.moimage:hover + .wrapper, .wrapper:hover {
  display: block;
}

<div class="molist">
  <img class="moimage" src="http://i.imgur.com/UU5q8FB.jpg">
	<ul class="wrapper">
	  <li class="covercomment">
 	    <span class="cocom">2 Comments</span>
	  </li>
  	  <li class="coverLinks">
	    <span class="colin">2 Links</span>
	  </li>
	  <li class="coverviews">
	    <span class="covedlin">60 Views</span>
	  </li>
	</ul>
</div>

Answer 4

HTML结构

<!-- Container with no position to handle flow after stack -->
<div class="container">
  <!-- Stack with position: relative -->
  <div class="stack">
    <!-- Image and overlay with position: absolute -->
    <img src="" alt="">
    <div class="overlay"></div>
  </div>
  <!-- Caption -->
  <h4></h4>
</div>

宽度效果

为效果添加.overlay width: 0，overflow: hidden和过渡。

使用

实现效果

.container:hover .overlay { width: 100% }

实施例

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}

html,
body,
.img-container .stack,
.img-container img,
.img-container .overlay {
  width: 100%;
  height: 100%;
}

.img-container {
  width: 120px;
  height: 176px;
}

.img-container img {
  display: block;
}

.img-container>.stack {
  position: relative;
}

.img-container * {
  margin: 0;
  padding: 0;
}

.img-container ul {
  list-style: none;
  padding: 20px 15px;
  color: white;
}

.img-container img,
.img-container .overlay {
  position: absolute;
}

.img-container .overlay {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  background: #252525;
  opacity: 0.9;
  transition: all .3s ease-in-out;
}

.img-container:hover .overlay {
  width: 100%;
}

.img-container h4 {
  padding: 10px 5px;
}

＆＃13;

<div class="img-container">
  <div class="stack">
    <img src="http://i.imgur.com/UU5q8FB.jpg" alt="">
    <div class="overlay">
      <ul>
        <li>2 Comments</li>
        <li>2 Links</li>
        <li>60 Views</li>
      </ul>
    </div>
  </div>
  <h4>Name</h4>
</div>

＆＃13;

＆＃13;

＆＃13;