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

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

html css

Html Css将图片转换为左侧重叠文本,html,css,Html,Css,我目前正试图使一个图像向左展开，溢出它所在的div块以重叠一些文本。没有过渡，它工作得很好，但我完全无法使用过渡产生效果，我已经做了好几个小时了，在谷歌上搜索，但没有多大帮助起初，我认为我可以使用“顶部”和“左侧”属性在扩展图像时更改图像，但没有成功这是没有转换的代码我只是没有想法，所以如果有人告诉我怎么做，为什么，那就太棒了 <head> <style type="text/CSS"> Img:hover{ ove

我目前正试图使一个图像向左展开，溢出它所在的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>


Img：悬停{
溢出：可见；
位置：相对位置；
左：-360px；
顶部：0px；
宽度：400px；
高度：640px；
}
I.I康明{
宽度：40px；
高度：64px；
}
.divBox{
浮动：左；
宽度：40px；
高度：64px；
}
.divText{
显示：块；
宽度：400px；
高度：640px；
浮动：左；
}
尼海德
斯卡贝隆测试
在测试中，你只需输入文本就可以了

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

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

过渡阶段的主要部分是：

 transition: all 0.2s linear;

然后我使用

z-index

进行重叠

编辑：试试这个：

我把

float:right并更改了一些其他内容。
您能对您已经完成的工作做一点修改吗？你需要的不是很清楚，这有帮助吗<代码>过渡：所有0.2s线性。把它放在Img:hover中。所以你的文档实际上没有
？它几乎没有-只是，我可以做同样的事情，我的代码没有那么漂亮，但它工作了。问题是让图片在右边，然后向左转换，如果不清楚的话，很抱歉。我现在明白你的意思了。给我几分钟，我看看是否能帮上忙。您可能需要小心转换所有属性，因为将来可能会出现一些不需要的行为。更好的做法是只转换要设置动画的属性。我还是不明白为什么它会在左边动画。2.假设我把它放在网页上一个空间有限的区域，一般的想法是图片在悬停时会“覆盖”文本