我只想使悬停的图像的文本可见,并且它应该在悬停的图片旁边(左/右)的灰色空间中(而不是在灰色空间外部的图片下方)。
只有CSS才有可能吗?
如果不是,我需要什么? javascript?
的HTML
<div class="pictures">
<div class="pic">
<img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
</div>
<div class="pic">
<img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
</div>
<div class="pic">
<img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
</div>
<div class="pic">
<img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
</div>
<div class="pic">
<img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
</div>
<div class="pic">
<img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
</div>
<div class="pic">
<img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
</div>
</div>
的CSS
.pictures {
background-color:rgba(25, 25, 25, 0.3);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
--width: 960px;
float:left;
margin: 0 auto;
position:relative;
left:100px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.pictures:hover {
left:40px;
}
.pic {
width:100px;
height:100px;
float:left;
margin:5px;
position: relative;
right: 0;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
background-color:rgba(25, 25, 25, 0.7);
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
color:blue;
border-radius: 3px;
/*abgerundete Ecken*/
}
.pic:hover {
width:210px;
height:210px;
margin:5px 115px 0px -105px;
right: -110px;
}
.inner-img {
width:100%;
}
在jsFiddle上的工作示例。
最佳答案
好吧,这里有几件事:
您的图像太大,因为存在透明像素,迫使该文本脱离深灰色框。将图像仅放大到需要的大小,然后将其嵌套在带有填充或其他内容的容器元素中,以达到类似的效果。
如果您要寻找的效果是直到您将鼠标悬停都看不到任何文字,那么可以。只需在文本中添加一个display:none
,然后添加一个类似.image-container:hover p { display:inline-block; }
的选择器,否则您可以使用css3不透明性并使其淡入,尽管由于它已经按比例放大,所以这很丑陋,您可能不希望它逐渐消失。
如果您想要的效果不是上述效果,则可以使用jQuery并轻松实现。假设您希望所有文本都可见,然后将鼠标悬停在其中,则希望所有其他图像的文本都消失,只需将$('.image-container').hover(function(){//hide all text but the text nested in current element receiving the hover event });
如果您对具体实施有任何疑问,请告诉我,但这可以帮助您入门