How do I position one image directly over the other? [duplicate] - html

Question

This question already has answers here:
How can i overlay an 10x10px image on top of another image? [duplicate]
(2 answers)
How do I position one image on top of another in HTML?
(13 answers)
Closed 5 years ago.
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

Answer 1

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>

Answer 2

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

Answer 3

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>

Answer 4

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>