[英]Overlay image on hover using only css
I'm trying to overlay an image with a smaller image that has the background opacity of the first image when hover, using only css because i'm not able to edit the html. 我试图使用较小的图像覆盖图像,该图像具有悬停时第一张图像的背景不透明性,仅使用css,因为我无法编辑html。
Here is a sample HTML: 这是一个示例HTML:
<div class="image">
<a href="http://www.example.com">
<img src="/uploads/2016/08/img1.png" class="rggclImgCenter">
</a>
</div>
Using CSS only, i thought would be something like this: 仅使用CSS,我认为应该是这样的:
.image:hover {
background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
}
But it will only replace the image. 但是它只会替换图像。
You could use the css pseudo element
if you wouldn't like to (or cannot) modify the html. 如果您不想(或不能)修改html,则可以使用
css pseudo element
。
Please be awared you cannot use :before
or :after
on img
element 请注意,您不能在
img
元素上使用:before
或:after
Here is the CSS: 这是CSS:
img { max-width: 300px; } /* the image dimension */
.image a { position: relative; display: inline-block; } /* allow :before element positioning easier */
.image a:hover:before {
position: absolute;
top: 30px; left: 40px; /* Where to put the overlay */
display: inline-block;
content: ''; /* must have */
width: 300px; height: 164px; /* size of the element */
background-image: url('https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg'); /* URL of the image */
background-size: 300px 164px; /* Resize the image as this dimension */
opacity: .5; /* Transparent rate */
}
You can try it on https://jsfiddle.net/bq9khtz3/ 您可以在https://jsfiddle.net/bq9khtz3/上尝试
Did not have the original image so used an image of my own. 没有原始图像,所以使用了我自己的图像。 See if this helps.
看看是否有帮助。
You can also refer to this link: https://jsfiddle.net/askptx0y/ 您也可以参考以下链接: https : //jsfiddle.net/askptx0y/
.image:hover { background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png'); background-repeat: no-repeat; opacity: 1; } img:hover { opacity: 0.5; }
<div class="image"> <a href="http://www.example.com"> <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" class="rggclImgCenter"> </a> </div>
Try adding a :before
element on :hover
. 尝试在
:hover
上添加:before
元素。
.image a:hover:before {
content: '';
display: block;
position: absolute;
background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
}
Make image transparency: 使图像透明:
.image a:hover image {
opacity: 0;
}
Show your background image 显示背景图片
.image a:hover {
background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
/* add other properties */
}
.image:hover img {
-webkit-filter: brightness(40%);
-moz-filter: brightness(40%);
-ms-filter: brightness(40%);
-o-filter: brightness(40%);
}
.image:hover img:after {
content: '';
display: block;
position: absolute;
background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.