Question

当我悬停时，我希望文字隐藏在图像顶部，应该是可见的。

通常情况下，图片看起来像这样，不会悬停上面的文字。

但是，当我将鼠标悬停在后面

时，我不会将文字显示在图像顶部

所以基本上这里显示的文本和上面图像中显示的div应该最初隐藏，当悬停完成时显示这些元素。

类似于this

的内容

我试过的代码不起作用

HTML：

<div class="imgcontainer"> 
    <span class="hideme">Image text</span>
    <img class="img-responsive" id="thumbnail" src="source of image">
</div>

的CSS：

.scaleout {
    transform: scale(1, 0.80);
    -ms-transform: scale(1, 0.80);
    -webkit-transform: scale(1, 0.80);

}

.hideme {
    color: black;
    top: inherit;
    z-index: -1;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

请帮助

Answer 1

让我帮助你。：）

＆＃13;

.scaleout {
  transform: scale(1.25);
  -ms-transform: scale(1.25);
  -webkit-transform: scale(1.25);
}
.hideme {
  font-size: 14px;
  color: black;
  top: inherit;
  z-index: -1;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
#thumbnail {
  width: 220px;
  height: 150px;
  display: block;
  transform: scale(1.25);
  -ms-transform: scale(1.25);
  -webkit-transform: scale(1.25);
  transition: all ease 500ms;
}
#thumbnail:hover {
  transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transition: all ease 500ms;
}

＆＃13;

<div class="imgcontainer">
  <span class="hideme">Image text</span>
  <img class="img-responsive" id="thumbnail" src="https://www.orbitz.com/blog/wp-content/uploads/2011/09/Albuquerque_International_Balloon_Fiesta_snowpeak-e1315595588824.jpg">

 <span class="hideme">Another Image text? No problem :)</span>
</div>

＆＃13;

Answer 2

我希望这可以帮到你。 Jsfiddle

.hideme 
{
    display: block;
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 10;
    transition:0.3s;
}

.imgcontainer:hover .hideme
{
    top:0;    
}

.imgcontainer
{
    width: 201px;
    height: 286px;
    position: relative;
}

img
{
    position: absolute;
    bottom: 0;
    transition: 0.3s;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 286px;
    z-index: 15;
}


.imgcontainer:hover img
{
    height: 80%;
    bottom: 10%;
}

<div class="imgcontainer"> 
    <span class="hideme">Image text</span>
    <img width="100%" class="img-responsive" id="thumbnail" src="http://s7.postimg.org/x3fs9p8cr/image.png">
</div>

Answer 3

figure { display: flex; flex-direction: column;}
div { order: -1; visibility: hidden; }
img { align-self: flex-start; }
img:hover + div { visibility: visible; }

<figure>
  <img src=https://i.stack.imgur.com/mJHKc.png?s=256&g=1>
  <div>You see me only when the img is hovered :)</div>
</figure>

Answer 4

＆＃13;

 .hideme {
   font-size: 14px;
   color: black;
   top: inherit;
   z-index: -1;
   text-align: center;
   vertical-align: middle;
   position: relative;
 }
 #thumbnail {
   width: 220px;
   height: 150px;
   display: block;
   transform: scale(1.2);
   -ms-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   transition: all ease 100ms;
 }
 #thumbnail:hover {
   transform: scale(1);
   -ms-transform: scale(1);
   -webkit-transform: scale(1);
   transition: all ease 100ms;
 }

＆＃13;

<div class="imgcontainer">
  <span class="hideme">Image text</span>
  <img class="img-responsive" id="thumbnail" src="http://s7.postimg.org/x3fs9p8cr/image.png">
</div>

＆＃13;

Answer 5

尝试这个CSS。它会帮助你。对于进一步的CSS（HOVERS＆amp; STYLES），请访问该网站 “http://codepen.io/”

问候：Sheheryar （PAK）

figure {
	width: 600px;
	height: 400px;
	margin:auto;
	padding: 0;
	background: #fff;
	overflow: hidden;
}


.hover01 figure img {
	-webkit-transform: scale(0.8);
	transform: scale(0.9);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover01 figure:hover img {
	-webkit-transform: scale(1);
	transform: scale(1);
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link rel="stylesheet" href="css/style.css">
 <script src="js/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
<title>Untitled Document</title>
</head>

<body>

	<div class="hover01 column">
		<div > 
	   			<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure>
</div>
</body>
</html>

如何使用HTML5 / CSS3实现以下目标？

5 个答案: