Question

我目前正试图让图片向左展开，溢出div块以重叠某些文字。它没有过渡就能正常工作，但是我完全无法使用过渡产生效果，我已经使用了几个小时，谷歌搜索，但它没有多大帮助。

最初我认为我可以使用顶部和左侧属性来扩展它时更改图像，但它没有用。

没有过渡的代码。

我只是出于想法，所以如果有人告诉我如何，并告诉我原因，那就太棒了。

 <head>
    <style type="text/CSS">
        Img:hover{
            overflow:visible;
            position:relative;
            left:-360px;
            top:0px;
            width:400px;
            height:640px;
        }

        .iconImg {
            width:40px;
            height:64px;   
        }

        .divBox{
            float:left;
            width:40px;
            height:64px;    
        }

        .divText{
            display:block;
            width: 400px;
            height:640px;
            float:left;
        }

    </style>
</head>
<h1>Nyheder</h1>
<div class="">
    <span class="">
        test af Skabelon
    </span>
</div>
<div class="divtext">
    <span>Dette er en test som skal bruge mere text for at test om billedet kan flyde henover det, mere, mere, mere, mere tekst</span>
</div>

<div class="divBox">
    <img class="transitionClass iconImg" src="hej.png">
</div>

使用的图像具有简单的分辨率：400x640。

Answer 1

我把它放在一起。希望它能回答你的问题

http://codepen.io/anon/pen/qIzHg

过渡的主要部分是：

 transition: all 0.2s linear;

然后我使用z-index进行重叠

编辑：试试这个：

http://codepen.io/anon/pen/qIzHg

我放入float:right;并更改了其他一些内容。

Css将图片转换为左侧重叠文本

1 个答案: