当我悬停时,我希望文字隐藏在图像顶部,应该是可见的。
通常情况下,图片看起来像这样,不会悬停上面的文字。
但是,当我将鼠标悬停在后面
时,我不会将文字显示在图像顶部所以基本上这里显示的文本和上面图像中显示的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;
}
请帮助
答案 0 :(得分:2)
让我帮助你。 :)
.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;
答案 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)
.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;
答案 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>