悬停时在图像上显示文字

Question

我希望能够使文本在悬停时显示在图像上，而不会影响文本框的当前效果。有人可以帮助我吗？

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #4d4d4d4d; } .pic { border: 0px solid #55009f; height: 200px; width: 200px; margin: 20px; overflow: hidden; } /*MORPH*/ .morph { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .morph:hover { -webkit-transform:translate(0px,-10px); -webkit-filter:grayscale(100%) blur(1px); } 

 <link rel="Stylesheet" href="Stylesheet.css"> <div class="morph pic"> <img src="http://lorempixel.com/300/300/sports/1" alt="cricket"> </div> 

Answer 1

这称为imagetooltip

访问

http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

一切都包括演示，代码和文件。

Answer 2

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #4d4d4d4d; } .morph{ height: 200px; width: 200px; text-align:center; margin:0 } .pic { border: 0px solid #55009f; height: 100%; width: 100%; margin: 0px; overflow: hidden; } /*MORPH*/ .pic{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .morph:hover > .pic{ -webkit-transform:translate(0px,-10px); -webkit-filter:grayscale(100%) blur(1px); } .tooltip{ background:rgba(80,80,80,0.5); color:black; z-index:10; display:none; position:absolute; top:100px; height:200px; width:200px; margin-top:-100px; } .morph:hover > .tooltip{ display:block; } 

 <link rel="Stylesheet" href="Stylesheet.css"> <div class="morph"> <div class="pic"> <img src="http://lorempixel.com/300/300/sports/1" alt="cricket"> </div> <div class="tooltip">Lorem ipsum sit dolor am ecit, lorem ipsum sit dolor am ecit, I'm sure I got these wrong, but who cares </div> </div> 

您可以这样做：)

Answer 3

悬停时，我没有看到要显示在此处的任何文本。 但是:hover是实现这一目标的方法。 因此，答案很简单，就是为要显示的文本提供标签元素，然后将其隐藏，然后在悬停时显示该元素。 例如：

  <div class="imtex">
       <img src="some.jpg"/>
       <p>hi my text is here</p>
  </div>

所以样式是：

    .imtex {
      display: block; 
      position: relative; //in case you want the child to absolute
     }

     .imtex img {
        display: block; 
        position:absolute; 
        z-index: 2; 
        top: 0; 
        bottom:0; 
        left:0; 
        right: 0;
     }

     .imtex p {
        display: none; 
        position:absolute; 
        z-index: 3; //after the image index 
        top: 0; 
        bottom:0; 
        left:0; 
        right: 0;
     }

    .imtex:hover p {
       display: block;
     }