如何将一个图像直接放在另一个图像上？

时间：2017-05-19 15:51:30

标签： html css

目的是在悬停时将灰色图像叠加在蓝色上（使灰色图像变为蓝色图像）。

此时蓝色图像偏离中心，因此不会直接位于灰色顶部。

Here's how the menu currently looks when I hover over the first icon.

HTML 

<div class="footerContainer">
    <div class="iconContainer">
        <img class="homeIcon" src="images/Home Icon.png"/>  <!--grey image-->
        <img class="homeIconHover" src="images/Home Icon blue.png"/>  <!--blue image-->
    </div>

    <div class="iconContainer">
        <img class="magIcon" src="images/Magazine Icon.png"/>
        <img class="magIconHover" src="images/Magazine Icon blue.png"/>
    </div>

    <div class="iconContainer">
        <img class="newsIcon" src="images/News Icon.png"/>
        <img class="newsIconHover" src="images/News Icon blue.png"/>
    </div>

    <div class="iconContainer">
        <img class="eventIcon" src="images/Event Icon.png"/>
        <img class="eventIconHover" src="images/Event Icon blue.png"/>
    </div>

    <div class="iconContainer">
        <img class="socialIcon" src="images/Social Icon.png"/>
        <img class="socialIconHover" src="images/Social Icon blue.png"/>
    </div>
</div>

CSS 

.footerContainer{
    border-top: rgba(0,0,0,0.8) 2px solid;
    height: 5rem;
    display: flex;
    background-color: #e5e5e5;
    background-size: cover;
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
}

.iconContainer{
    width: 20%;
    margin: auto;
}

/* grey images */

.homeIcon{
    text-align: center;
    height: 71px;
    margin: auto;
    position: relative;
}

.magIcon{
    text-align: center;
    height: 58px;
    margin: auto;
    position: relative;
}

.newsIcon{
    text-align: center;
    height: 64px;
    margin: auto;
    position: relative;
}

.eventIcon{
    text-align: center;
    height: 80px;
    margin: auto;
    position: relative;
}

.socialIcon{
    text-align: center;
    height: 80px;
    margin: auto;
    position: relative;
}


/* HOVER */

/* blue images */

.homeIconHover{
    text-align: center;
    height: 71px;
    margin: auto;
    opacity: 0;
    position: absolute;
}

.iconContainer:hover .homeIconHover{
    opacity: 1;
  }

.iconContainer:hover .homeIcon{
    opacity: 0;
}

.magIconHover{
    text-align: center;
    height: 58px;
    margin: auto;
    opacity: 0;
    position: absolute;
}

.iconContainer:hover .magIconHover{
    opacity: 1;
  }

.iconContainer:hover .magIcon{
    opacity: 0;
}

.newsIconHover{
    text-align: center;
    height: 64px;
    margin: auto;
    opacity: 0;
    position: absolute;
}

.iconContainer:hover .newsIconHover{
    opacity: 1;
  }

.iconContainer:hover .newsIcon{
    opacity: 0;
}

.eventIconHover{
    text-align: center;
    height: 80px;
    margin: auto;
    opacity: 0;
    position: absolute;
}

.iconContainer:hover .eventIconHover{
    opacity: 1;
  }

.iconContainer:hover .eventIcon{
    opacity: 0;
}

.socialIconHover{
    text-align: center;
    height: 80px;
    margin: auto;
    opacity: 0;
    position: absolute;
}

.iconContainer:hover .socialIconHover{
    opacity: 1;
  }

.iconContainer:hover .socialIcon{
    opacity: 0;
}

提前干杯

4 个答案:

答案 0 :(得分：0)

将position: relative添加到.iconContainer，以便叠加图像上的绝对定位将与其父级相对。然后在叠加图像上使用top: 0; left: 50%; transform: translateX(-50%);将其定位在容器的中心，就像另一个图像一样。

＆＃13;
＆＃13; 
.footerContainer {
  border-top: rgba(0, 0, 0, 0.8) 2px solid;
  height: 5rem;
  display: flex;
  background-color: #e5e5e5;
  background-size: cover;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
}

.iconContainer {
  width: 20%;
  margin: auto;
  position: relative;
}


/* grey images */

.homeIcon {
  text-align: center;
  height: 71px;
  margin: auto;
  position: relative;
}

.magIcon {
  text-align: center;
  height: 58px;
  margin: auto;
  position: relative;
}

.newsIcon {
  text-align: center;
  height: 64px;
  margin: auto;
  position: relative;
}

.eventIcon {
  text-align: center;
  height: 80px;
  margin: auto;
  position: relative;
}

.socialIcon {
  text-align: center;
  height: 80px;
  margin: auto;
  position: relative;
}


/* HOVER */


/* blue images */

.homeIconHover {
  text-align: center;
  height: 71px;
  margin: auto;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.iconContainer:hover .homeIconHover {
  opacity: 1;
}

.iconContainer:hover .homeIcon {
  opacity: 0;
}

.magIconHover {
  text-align: center;
  height: 58px;
  margin: auto;
  opacity: 0;
  position: absolute;
}

.iconContainer:hover .magIconHover {
  opacity: 1;
}

.iconContainer:hover .magIcon {
  opacity: 0;
}

.newsIconHover {
  text-align: center;
  height: 64px;
  margin: auto;
  opacity: 0;
  position: absolute;
}

.iconContainer:hover .newsIconHover {
  opacity: 1;
}

.iconContainer:hover .newsIcon {
  opacity: 0;
}

.eventIconHover {
  text-align: center;
  height: 80px;
  margin: auto;
  opacity: 0;
  position: absolute;
}

.iconContainer:hover .eventIconHover {
  opacity: 1;
}

.iconContainer:hover .eventIcon {
  opacity: 0;
}

.socialIconHover {
  text-align: center;
  height: 80px;
  margin: auto;
  opacity: 0;
  position: absolute;
}

.iconContainer:hover .socialIconHover {
  opacity: 1;
}

.iconContainer:hover .socialIcon {
  opacity: 0;
}
＆＃13; 
<div class="footerContainer">
    <div class="iconContainer">
        <img class="homeIcon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"/>  <!--grey image-->
        <img class="homeIconHover" src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"/>  <!--blue image-->
    </div>

    <div class="iconContainer">
        <img class="homeIcon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"/>  <!--grey image-->
        <img class="homeIconHover" src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"/>  <!--blue image-->
    </div>
  
  <div class="iconContainer">
        <img class="homeIcon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"/>  <!--grey image-->
        <img class="homeIconHover" src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"/>  <!--blue image-->
    </div>
  
  <div class="iconContainer">
        <img class="homeIcon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"/>  <!--grey image-->
        <img class="homeIconHover" src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"/>  <!--blue image-->
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

相反，您可以使用css将所有图像的颜色更改为黑白。 https://jsfiddle.net/z57s6quj/ 

img  {
  transition: all 200ms;
  filter: grayscale(100%);
}

img:hover {
  filter: none
}

看看兼容性 http://caniuse.com/#search=filter

答案 2 :(得分：-1)

只是一个“开箱即用”的答案。您首先不需要第二个图像，而是可以使用过滤器来实现相同的效果。

以下是两种不同的方法。 filter有非常好的支持并且使用常规图像，background-blend-mode还没有支持（谢谢，微软！）但使用背景图像。

#one{
  background-image: url('http://lorempixel.com/200/100/sports/1');
  background-color: blue;
  background-blend-mode: screen;
  width:200px;height:100px;
  margin-right:10px;
  float:left;
}
#one:hover{
  background-color: transparent;
}
#two{
  background-color: red;
  height:100px; width:200px;
  float:left;
}
#two img{
  filter:grayscale(100%);
  opacity:.5;
}
#two img:hover{
  filter:grayscale(0%);
  opacity:1;
}
<h3>Hover the images:</h3>

<div id="one">
</div>
<div id="two">
<img src="http://lorempixel.com/200/100/sports/1" />
</div>

答案 3 :(得分：-1)

另一种选择是在您的图标上使用SVG并在悬停时设置fill的样式。 SVGs 可扩展矢量图形，因此在任何设备分辨率或比例下保持清晰。

这是一个简单的例子：

svg {width:20%}
svg path {
   fill: grey; 
}

svg:hover path {
  fill: blue;
}
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<title>home</title>
<path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
</svg>
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<title>book</title>
<path d="M28 4v26h-21c-1.657 0-3-1.343-3-3s1.343-3 3-3h19v-24h-20c-2.2 0-4 1.8-4 4v24c0 2.2 1.8 4 4 4h24v-28h-2z"></path>
<path d="M7.002 26v0c-0.001 0-0.001 0-0.002 0-0.552 0-1 0.448-1 1s0.448 1 1 1c0.001 0 0.001-0 0.002-0v0h18.997v-2h-18.997z"></path>
</svg>

相关问题
最新问题