CSS鼠标悬停图片上图片变灰 变色 半透明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div1,.div2{ width:500px; margin:20px auto}
.div1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
.div2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7}
</style>
</head>

<body>
<p>鼠标移动到图片悬停时，图片变色滤镜效果：</p>
<div class="div1"><a href="#"><img src="images/div-a-bg.png" /></a></div>
<div class="div2"><a href="#"><img src="images/an.gif" /></a></div>
</body>
</html>

时间： 2024-10-19 00:15:25

CSS鼠标悬停图片上图片变灰 变色 半透明的相关文章

div css鼠标悬停锚文本超链接文字背景颜色或图片变化

div css鼠标悬停锚文本超链接文字背景颜色或图片变化(体感音乐) css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇.(体感音乐) 此DIV CSS布局技巧其实是对a标签做鼠标经过CSS样式.利用以下代码: a{...} 原始超链接默认样式设置a:hover{...}鼠标悬停经过时超链接锚文本CSS样式(扩展阅读:ie6 hover)一.链接文字无背景鼠标经过悬停

鼠标移动到图片上图片逐渐变大、变清晰（带有过渡效果）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标移动到图片上图片逐渐变大.变清晰(带有过渡效果)</title> <style type="text/css"> div{ width: 300px; height: 300px; margin: 50px auto; overflow: hidden; fil

鼠标悬停时显示图片边框和文字描述的图片特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

CSS鼠标悬停图片加边框效果,不位移的方法

<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效果</title> <style type="text/css"> body{background:#222;color:#06c;} em{ font-style:inherit;} img{background:white;margin:0 5px;width:

CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. 效果如下图所示: 1.当未鼠标未放到图片上的效果: 2.当鼠标放到图片上后(放大的过程是有动画过渡的,这个过渡的时间可

HTML+CSS鼠标悬停效果

HTML+CSS实现鼠标悬停效果 HTML: <link href="style.css" rel="stylesheet"> <a class="social" href="https://webbb.be" target="_blank"> <div class="front"> <i class="fa fa-facebook&q

css实现鼠标悬停在图片上图片缓慢缩放效果

方法一: .container{ background-size: 100% 100%; transition: all 2s; } .container:hover{ background-size: 120% 120%; } 方法二: img{ transition: all 2s; } img:hover{ transform:scale(1.2);   //图片放大的倍数 } 原文地址:https://www.cnblogs.com/Zg-blog/p/9385280.html

利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. 1 .container{ 2 background-size: 100% 100%; 3 transition: all 2s; 4 } 5 .container:hover{ 6 background-size: 120% 120%; 7 } 这种方法有个问题是图片缩放的时候会出现抖动的现象 2.利用scale 使用img标签,并在img标签上添加transform属

在 IE8 中鼠标移到图片上图片变空白

在head中加入添加一个元素 <meta http-equiv="X-UA-Compatible"content="IE=8"></meta>