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

时间:2015-11-14 08:04:59

标签: html css css3

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

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

Without hover on image

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

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

enter image description here

所以基本上这里显示的文本和上面图像中显示的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;
}

请帮助

5 个答案:

答案 0 :(得分:2)

让我帮助你。 :)

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分: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>

答案 2 :(得分:1)

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>

答案 3 :(得分:1)

&#13;
&#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;
&#13;
&#13;

答案 4 :(得分:1)

尝试这个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>