CSS图像缩略图翻转显示文字

rollover

STEP标志是一个缩略图，以及RV标志旁边是一样的，只不过它是在这一点上，视图项目和蓝色透视背景出现。

我试了几件事情：

制作的IMG的<a>标签的背景和放置<p>标签在<a>标签和使用display: none;，然后:hover变为display: block;

这种布局响应这样造成的问题，我的代码是这样的：

HTML：

<a class="work-thumb" href="#"><p class="work-thumb-rollover">view project</p></a>

CSS：

a.work-thumb { 
    width: 20%; 
    padding-top: 50%; 
    background-image: url(images/work1.jpg); 
    background-size: cover; 
    -moz-background-size: cover; /* Firefox 3.6 */ 
    background-position: center; 
} 
    /* This code works, the image as the background is responsive */ 

p.work-thumb-rollover { 
    display: none; 
} 

p.work-thumb-rollover:hover { 
    display: block; 
    text-align: centre; 
    width: 100%; 
    background: rgba(54, 25, 25, .5); 
} 

    /* This doesn't seem to work, the width 100% doesn't take the width of it's parent and on rollover no color appears? */

我使用HTML和绝对定位img标签也试过：

HTML：

<a class="work-thumb" href="#"><img src="images/work1.jpg" alt="work"><p class="work-thumb-rollover">view project</p></a>

CSS：

.work-thumb { 
    position: relative; 
} 

.work-thumb img { 
    width: 33%; 
    height: auto; 
    float: left; 
    padding: 0; 
    margin: 0; 
    border: 0; 
    z-index: 1; 
} 

p.work-thumb-rollover { 
    display: none; 
} 

p.work-thumb-rollover:hover { 
    position: absolute; 
    display: block; 
    text-align: centre; 
    width: 100%; 
    background: rgba(54, 25, 25, .5); 
    top: 50%; 
    left: 50%;   
}

这一个，P标签宽度不会采用那个o如果它是父项，并且将坚持框的右上角（不管我给出的属性为top或left属性）。

我尝试了类似这样的事情，我删除了它们，并回到了原来的一个（只是在没有CSS的情况下，HTML中的图像除了响应性在一分钟之外），但我尝试过这些变体，只是无法让他们工作。

任何人都可以照亮这一点，或提供他们可能已经使用或看到的简单解决方案吗？

来源

2013-02-26 Jon Kyte

'工作缩略图'的图像不是我的工作，只是为了记录。我只是屏幕从一个网站拍摄它。 – 2013-02-26 17:46:51

你可以这样做只是用CSS/3和HTML：

Heres an example I made for you

你不得不更换

background-color

与

background-image

得到结果你后。

编辑：这里有一个更新的jsfiddleLink >>

来源

2013-02-26 17:53:22 chriz

感谢您的关注 - 除了我仍然能够看到“悬停”上的原始背景图像外，这几乎是我所追求的。你知道我能做到吗？ – 2013-02-26 18:05:53

当然！只需将图像放在div中，并将其设置为居中即可http://jsfiddle.net/7Db9n/3/ – chriz 2013-02-26 18:08:36

你我的朋友，真棒。非常感谢！我欠你一杯啤酒。 – 2013-02-26 18:30:50

您可以将锚标记转换成一个div 特定的宽度和高度和：悬停可以更改背景图片。在div必须样式

显示：inline-block的

来源

2013-02-26 17:56:00

我不能使用特定的宽度和高度，因为设计是流畅的，宽度都是使用百分比，任何其他想法计算？ – 2013-02-26 18:08:00

如果我理解你的问题正确的话，你希望显示的文本以及改变悬停背景图像。为什么不使用一个小jQuery来完成它：

<a class="work-thumb" href="#"><img src="images/work1.jpg" alt="work"><p class="work-thumb-rollover"></p></a> 

$('.work-thumb').hover(function() { 

$('.work-thumb-rollover').text('view project'); 
$('.work-thumb > img').attr('src', 'images/work2.jpg'); 

});

来源

2013-02-26 18:02:38 Alex

几乎，我希望背景图像保持原样，因此在我的照片中，RV只是图像，然后在悬停时，“VIEW PROJECT”和“放大镜”几乎叠加在背景图像上，并且当你不再徘徊时消失。有任何想法吗？ – 2013-02-26 18:07:23

CSS图像缩略图翻转显示文字

回答

相关问题