悬停时照亮图像 [英] Light up image on hover

问题描述

看看 http://www.kickstarter.com .

当您将鼠标悬停在其徽标上时，图像会亮起.这种效果是否可以在悬停时不使用其他图像的情况下实现?

When you hover over their logo, the image lights up. Is this effect doable without using a different image on hover?

我的第一个想法是使用 :: after:hover 并添加具有高透明度的白色正方形覆盖徽标，但是由于我的徽标位于蓝色背景上，因此不会.另一个想法是将不透明度设置为0.9，悬停时将其设置为1.但这会使图像在默认情况下显得太暗.

My first idea was to use ::after:hover and add a white square with high transparency that covers the logo, but since my logo is placed on a blue background this would not work. Another idea is to set opacity to 0.9 and on hover set it to 1. But this makes the image look too dark by default.

推荐答案

据我所知，由于蓝色背景，您目前无法使用纯CSS进行所需的操作.我认为您最好的选择是在photoshop中将图像编辑为其:hover 亮度，然后使用类似以下内容的方法:

As far as I am aware you can't do what you require with pure CSS at this point, due to the blue background. I think your best bet is edit the image in photoshop to be its :hover brightness, and then use something like:

img { 
  opacity: 0.7; 
} 

img:hover { 
  opacity: 1; 
}

<罢工>更改悬停时的不透明度将起作用:

Changing the opacity on hover will work:

img:hover {
   opacity: 0.5;
}

小提琴

Fiddle

这篇关于悬停时照亮图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！