html图片向上,CSS实现图片向上浮动

CSS实现图片向上浮动办法

今天在写CSS时需要实现：当鼠标悬停在由图片和介绍组成的超链接时，榴莲向上浮动的效果。

我在实现这个效果时思路分为以下几步：

鼠标悬停

图片移动

下方元素绝对定位

增加过渡时间

1.鼠标悬停-增加伪类选择器：hover

当鼠标悬停时改变元素样式，首先想到的是使用伪类选择器:hover。在写这里的时候遇到的问题是，悬停在超链接上仅使图片部分移动，而文字介绍部分不移动。因此在写伪类的时候不能写成#id a:hover，而应在其后再加上图片部分div的类选择器，即#id a:hover .class {}。这样便能实现超链接悬停而仅移动图片。

2.图片移动-改变元素的margin/padding

要使得图片移动，就是改变图片的位置，使得悬停时图片位置上移，那么我们可以改变元素的margin或者padding属性，以达到移动目的

3.下方元素绝对定位

由于流的影响，图片位置的移动会影响下面文字介绍和价格的位置，即整体均向上移动。为了使其留在原位，其位置应该改为绝对定位，不再赘述。

4.增加过渡时间-transition

为使过度不太生硬，需要增加transition属性。但需要注意的是，不提议在:hover中增加transition属性，因为当鼠标移开时，transition属性便消失，这样鼠标移开时便显得过于生硬。只要在需要移动的元素，例如上面的.class中直接添加transition属性即可。

html图片向上,CSS实现图片向上浮动相关推荐

html 图片布局,CSS 布局图片
通过CSS 布局图片圆角图片 .img1 { border-radius: 8px; } .img2 { border-radius: 50%; } 缩略图 img { border: 1px so ...
html css 如何将图片作为背景,CSS背景图片和HTML中的img标签
背景图片: 该图片是218*170 css内容: div{ width: 100px; height: 100px; background: url(img/1.jpg); border: 2px s ...
html图片折叠,CSS 实现图片鼠标悬停折叠效果
CSS 实现图片鼠标悬停折叠效果 1. 实现要点折叠是由多个块级元素来完成的; 图片是以背景图片的方式呈现出来的; 给每个块级元素设置同一张背景图片,通过background-position来控 ...
css禁止图片保存,CSS的图片保存后面目全非？教你快速解决
什么叫"CSS中的图片"? 简单的说就是镶在CSS样式表中的图片.当我们用浏览器的"另存为"功能保存网页时,由于很多写在CSS样式表里面的图片都下载不到,所以会 ...
html如何做好看的图片效果,CSS使用图片美化的漂亮菜单效果
本文实例讲述了CSS使用图片美化的漂亮菜单效果.分享给大家供大家参考.具体如下: 这里介绍的这个菜单很漂亮,因为每个菜单项都是调用的图片,感觉这个菜单有点华而不实,毕竟菜单太多会影响网页加载,一个菜单 ...
html中两个图片叠放,CSS实现图片叠放（勾选图标）
场景我们经常会遇到这种场景,有一个待选图片列表,在图片上(可能是右上角也有可能时右下角)叠放一个勾选状态图标,这篇文章就记录实现这个功能的过程. 原理利用flex布局space-around显示图 ...
html怎么帮图片占位,html图片和css背景图片哪个先开始加载？css占位图怎么操作？...
如果你的网站是个图片站,首页显示了很多图片.那么你就会有图片多了导致加载比较慢的困扰.这个时候有几个方案解决. 1.物理解决方案:加大网站的带宽+压缩图片大小: 2.用图片懒加载js,图片没加载出来之 ...
html中图片放css还是,图片到底是写在html还是写在css呢
[原文请进入] 之前讲了些年青人在大学里和刚踏入社会时应该持有怎样的学习态度和掌握什么样的学习方法,以及怎么去面对自己的职业选择.随着炎热七月的到来,相信有很大部分... 到底是补铁还是铁过量作者 ...
html背景图片横屏,CSS背景颜色背景图片居中重复固定样式background经验篇
我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...

html图片向上,CSS实现图片向上浮动

html图片向上,CSS实现图片向上浮动相关推荐

最新文章

热门文章