对图像使用":hover"

我的网站目前有一个主页，其中包含4个兼作按钮的圆形图像。

我的问题：我正在尝试编码（使用html和css），这样当我将鼠标悬停在这些图像上时，圆形按钮中的图片会变为深灰色，而一个小按钮会出现在圆形图像的中心。单击此按钮时，它将引导您到其他位置，而不是将整个图像用作按钮。

简化：当我悬停在图像上时，我希望图像淡化为深灰色，并在图像中间显示一个小按钮。感谢

下面是一个示例图像和上面显示的文本的代码，但是我不知道如何使图像变暗并使按钮出现。

<a href = "https://twitter.com/"> <button id = "ButtonMyCV"></button> </a>
<a href = "https://twitter.com/"> <p class = "TextMyCV"> My CV </p> </a>
#ButtonMyCV
{
background-image:url("https://papowerwithvictoriadarragh.files.wordpress.com/2014/12/cv-image.jpg");
background-size: cover;
background-position: center center;
border-radius: 50%;
border: white solid 5px;
height: 300px;
width: 300px;
margin-left: 40px;
margin-top: 220px;
position: fixed;
}
.TextMyCV
{
position: fixed;
margin-left: 135px;
margin-top: 175px;
color: white;
font-size: 35px;
}
.TextMyCV:hover
{
text-decoration: underline;
}
#ButtonMyCV:hover
{
(Cannot get the grayscale effect to work here...)
}

.a {
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  position: relative;
  line-height: 0;
  width: 300px;
  height: 168px;
  overflow: hidden;
  margin: 0 auto;
  background: black;
}
img {
  position: absolute;
  z-index: 2;
}
.a:hover a {
  z-index: 2;
  -webkit-transition: opacity 2s ease-in;
  -moz-transition: opacity 2s ease-in;
  -o-transition: opacity 2s ease-in;
  -ms-transition: opacity 2s ease-in;
  transition: opacity 1s ease-in;
  opacity: 1;
}
.a a {
  z-index: 1;
  position: absolute;
  background: green;
  padding: 2px 15px;
  line-height: 1.5;
  text-decoration: none;
  top: 40%;
  opacity: 0;
  left: 40%;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
.a:hover img {
  opacity: .5;
  -webkit-transition: opacity 2s ease-in;
  -moz-transition: opacity 2s ease-in;
  -o-transition: opacity 2s ease-in;
  -ms-transition: opacity 2s ease-in;
  transition: opacity 1s ease-in;
}

<div class="a">
  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTEWxkwezdwqVYoCbDs_tZtR5o_mLPPlbHVLlS4lGFlZnjcowgPzw"> <a href="#">Button</a> 
</div>

您需要使用CSS中的hover来获得效果

<html>
<head>
<style type="text/css">
    .urlImg {
        width: 185px;
        height:185px;
        display:block;
        background-image: url('img/image.png'); 
    }
    .urlImg:hover {
        background-image: url('img/other-image.png');
    } 
</style>
</head>
<body>
    <a href="" class="urlImg" title="Change Image"></a>
</body>
</html>

你只需要编辑你对渐变和颜色的偏好，而不是像本例中那样更改图像。

你可以通过应用线性梯度来伪造图像的淡入度，就像这样-

background: 
     linear-gradient(
         rgba(0, 0, 0, 0.4), 
         rgba(0, 0, 0, 0.4)), 
         url("https://papowerwithvictoriadarragh.files.wordpress.com/2014/12/cv-image.jpg"
     );

此外，我对HTML和CSS进行了一些更改。我认为这应该对你有用，看看这个片段。

SNIPET

html,
body {
  font-family: Arial, sans-serif;
}
#ButtonMyCV {
  background: url("https://papowerwithvictoriadarragh.files.wordpress.com/2014/12/cv-image.jpg");
  background-size: cover;
  background-position: center center;
  border-radius: 50%;
  border: white solid 5px;
  height: 300px;
  width: 300px;
  margin-left: 40px;
  margin-top: 20px;
  position: fixed;
  cursor: pointer;
}
#ButtonMyCV:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://papowerwithvictoriadarragh.files.wordpress.com/2014/12/cv-image.jpg");
  background-size: cover;
  background-position: center center;
}
#ButtonMyCV > a {
  transition: opacity .8s;
  opacity: 0;
}
#ButtonMyCV:hover > a {
  opacity: 1.0;
}
.TextMyCV {
  position: fixed;
  margin-left: 100px;
  margin-top: 125px;
  color: white;
  font-size: 35px;
  background: navy;
  padding: 5px;
  text-decoration: none;
  border-radius: 4px;
}
.TextMyCV:hover {
  text-decoration: underline;
}
#ButtonMyCV:hover {}

<div id="ButtonMyCV">
  <a class="TextMyCV" href="https://twitter.com/">My CV</a>
</div>

相关内容

最新更新

热门标签：