我只想使悬停的图像的文本可见,并且它应该在悬停的图片旁边(左/右)的灰色空间中(而不是在灰色空间外部的图片下方)。

只有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 });


如果您对具体实施有任何疑问,请告诉我,但这可以帮助您入门

10-05 20:45
查看更多