How do I position one image directly over the other?

Question

The aim is to have the grey images overlayed by the blue when hovered over (so that the grey image becomes the blue image).

At the moment the blue images are off centre and therefore not directly on top of the grey.

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;
}

Cheers in advance

you have some example of your idea? – Lafa May 19 '17 at 15:55 — Lafa, May 19 '17 at 15:55
I've added an example of how it currently looks above – Tucky May 19 '17 at 16:01 — Tucky, May 19 '17 at 16:01

score 0 · Accepted Answer · answered May 19 '17 at 15:59

Add position: relative to .iconContainer so that the absolute positioning on the overlay image will be relative to it's parent. Then use top: 0; left: 50%; transform: translateX(-50%); on the overlay image to position it in the center of the container like the other image.

.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;
}

<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>

score 0 · Answer 2 · answered May 19 '17 at 16:05

instead you can use css to change the color of all images to black and white. https://jsfiddle.net/z57s6quj/

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

img:hover {
  filter: none
}

take a look on compatibility http://caniuse.com/#search=filter

Christoph · Answer 3 · 2017-05-19T20:52:14.193

Just an "outside-the-box" answer. You don't need second images in the first place, but rather can use filters to achieve the same effekt.

Below are two different approaches. filter has really good support and uses a regular image and background-blend-mode is not there yet supportwise (thanks, Microsoft!) but uses background-images.

#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>

I'll give this a try as it'll simplify the code a lot, thanks — Tucky, May 19 '17 at 16:12

Moob · Answer 4 · 2017-05-19T16:16:20.107

Another alternative would be to use SVGs for your icons and style the fill on hover. SVGs are Scalable Vector Graphics so stay sharp at any device resolution or scale.

Here's a simple example:

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>

Any feedback re that down vote? – Moob May 19 '17 at 16:17 — Moob, May 19 '17 at 16:17
I think everyone in the thread was downvoted. – Michael Coker May 19 '17 at 16:26 — Michael Coker, May 19 '17 at 16:26

How do I position one image directly over the other?

4 Answers4