Question

我的图片上的文字没有显示。它的动画，但我希望鼠标悬停在我的图像上的文字。对于文本我使用按钮与图像，假设在鼠标悬停时弹出。我知道我的错误。我正在使用youtube教程中的代码。

.main 
{
 border: 10px solid white;
 width:378px;
 height:250px;
 margin:50px auto;
 box-shadow:0px 0px 25px black;
 overflow:hidden;
 }

.main:hover img 
{
-webkit-transform:scale(2,2) rotate(45deg);
}

.main:hover .content 
{
-webkit-transform:translate(-311px);
}

img 
{
-webkit-transition: -webkit-transform: 300ms;	
}

.content 
{ 
	width:378px;
 	height:250px;
	background: rgba(124,120,120,0.5);
    -webkit-transition: -webkit-transform: 300ms;
}
   
   button 
   {
	   width:100%;
	   height:50px;
	   margin-top:200px;
	   background:black;
	   border:0;
	   cursor:pointer;
	   color:white;
	   font:16px tahoma;
   }
   
   button:hover {
	  opacity: 0.5;
   }

<div class="main"><img src="img/switch.jpg" height="250" width="378"><div class="content"><button>Pepe Kalvier Switches</button></div></div>

Answer 1

你可以尝试这个：

<div class="main"><img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" height="250" width="378"><div class="content"><button>Pepe Kalvier Switches</button></div></div>

DEMO

Answer 2

当悬停时，您可以使用绝对位置在图像上方移动文本/按钮。

<强> CSS

.main:hover .content{
    z-index: 9999;
    position: absolute;
    top:0;
}

<强> DEMO HERE

图像上的文字不显示

2 个答案: