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

＆＃13;

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

＆＃13;

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

＆＃13;

你可以这样做:)

Answer 3

我在悬停时看不到任何想要在那里显示的文字。但:hover是实现这一目标的。所以答案就是为你想要显示的文本提供标记元素并隐藏它，然后在hoverin上显示元素。例如：

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

悬停时图像上的文字

3 个答案: