Image Hover不会扩展标题 [英] Image Hover doesn't expand the caption

问题描述

嘿伙计们，



所以我得到了它的一部分工作，但是当我将鼠标悬停在图像上时，它会将图像带出来，但是标题上有空格它的两面。

Hey guys,

so I got part of it working, however when I hover over the image, it brings the image out, however the caption has space on both sides of it.

<article>
     <div class="imageHolder">
        <img src="http://www.corelangs.com/css/box/img/caption4.jpg" alt="" />
           <div class="caption">
               <br>Caption goes here
           </div>
     </div>
</article>

我的CSS：

My CSS:

.imageHolder {
            position: relative;
            width: 285px;
        }

        .imageHolder .caption {
            position: absolute;
            width: 283px;
            height: 50px;
            bottom: 0px;

            color: #ffffff;
            background: green;
            text-align:center;
            font-weight:bold;
            opacity:0.7;
        }

        .imageHolder img {
            transition: all .2s ease-in-out;
        }

        .imageHolder img:hover {
            transform: scale(1.1);
        }

小提琴： http://jsfiddle.net/noz7v8cw / [ ^ ]



任何想法我做错了什么？

The fiddle: http://jsfiddle.net/noz7v8cw/[^]

any ideas what it is that I'm doing wrong?

推荐答案

try this

css

.imageHolder {
            position: relative;
            width: 285px;
        }

        .imageHolder .caption {
            position: absolute;
            width: 283px;
            height: 50px;
            bottom: 4px;

            color: #ffffff;
            background: green;
            text-align:center;
            font-weight:bold;
            opacity:0.7;
        }

        #test div {
            transition: all .2s ease-in-out;
        }

        #test div:hover {
            transform: scale(1.1);
        }

HTML

<article>
    <div id="test">
                                        <div class="imageHolder">
                                            <img src="http://www.corelangs.com/css/box/img/caption4.jpg" alt="" />
            <b class="caption"><br>Caption goes here</b>
                                            </div>
        </div>
        </article>

对不起不想修复这个bug;我几乎可以肯定你非常亲密，可以顺利完成这项工作。



相反，我想建议：做一些更有用的事情，改进你的设计。到目前为止，它意味着像我能做到类型的装饰。当然可以。为什么？首先，这个用于标题的半透明绿色乐队，这是你关心的问题，本身就是一个坏主意。你只是不允许用户欣赏漂亮的照片。它破坏了演示，它显示标签没有适当的对称性和合理的比例。即使它在这张图片上看起来也不是很糟糕，但对其他人来说看起来会更加丑陋。那么，你为什么要扩大你的画面。你只需缩放一点。许多网站访问者甚至不会将鼠标悬停在它上面。为什么要打扰？成千上万的网络设计师已经做了这个便宜的伎俩;所以，你真的希望给任何人留下深刻印象吗？ Web开发人员真正的虚拟化是清晰和简单的，现在很少见。要真正脱颖而出，请保持简单但功能更强大。建议在全屏，原始分辨率以及您想要的任何操作上显示图像的选项。



并且 - 保持图片标题，猜猜在哪里？图片之外！



我最好的祝福，

-SA

Sorry for not looking to fix this bug; I'm almost sure you are very close and could successfully complete this piece of work.

Instead, I would like to suggest: do something more useful, improve your design instead. So far, it means that like "I can do it" type of decoration. Of course you can. By why? First of all, this semi-transparent green band for the caption, the point of your concerns, is a bad idea itself. You just don't allow the user to enjoy nice picture. It spoils the presentation, it shows label without proper symmetry and reasonable proportion. Even if it looks not too bad on this very picture, it will look uglier on others. Then, why do you scale up your picture at all. You scale it just a bit. Many site visitors won't even hover over it. Why bothering? Hundreds or thousands of Web "designer" already do this cheap trick; so, do you really hope to impress anyone? The real virtual of a Web developer is clarity and simplicity, rare these days. To really stand out, keep it much simple but more functional. Suggest the options to show an image on full screen, in original resolution, and whatever operations you want.

And — keep your picture caption, guess where? Outside of the picture!

My best wishes,

—SA

这篇关于Image Hover不会扩展标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！