Pure CSS: Show image2 above/over/on top image1 on hover - html

Question

SOLVED FIDDLE:
I can't figure out how to display an image(two) above/over my current visible image(one) when hovered.
Html:
<img class="two" src="img/2.png" alt="bulb">
<img class="one" src="img/1.png" alt="me">
CSS:
.one {
display: block;
margin: 0 auto;
padding-top: 50px;
}
.two {
opacity: 0;
}
.one:hover .two {
opacity: 1;
}
What am I doing wrong?

Answer 1

Edit: If you want to show another image below the first image, than you need to change your DOM, as CSS cannot select the previous element, but it can select adjacent image, what you are using is .one:hover .two which will select an element having class .two nested under element having class .one on hover but since the elements are adjacent, you can use the selector below, but note that you need to change the element order in the DOM.
.one:hover + .two {
opacity: 1;
}
Demo
I assume Above means on hover you want to swap the image, so if that's what you want than use CSS Positioning techniques by setting your images to position: absolute; which are nested under position: relative; container.
Demo
div {
position: relative;
}
div img { /* Setting images to absolute */
position: absolute;
top: 0;
}
div img:nth-of-type(2) { /* Initially hiding image 2 */
opacity: 0;
}
div:hover img:nth-of-type(1) { /* On hover of div we hide 1st image */
opacity: 0;
}
div:hover img:nth-of-type(2) { /* On hover of div we show 2nd image */
opacity: 1;
}
You can also add transition property to smoothly swap the image on hover
Demo
div img {
position: absolute;
top: 0;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}

Answer 2

Try using position:absolute and wrap your images with a div
div.images{
border:solid green 4px;
height:120px;
width:120px;;
margin-top: 50px;
position:relative;
}
.images img{
position:absolute;
top:0;
left:0
}
.two {
opacity:0;
z-index:1;
}
.images:hover .two {
opacity: 10;
}
DEMO

Answer 3

if it does not matter which one of your images come first you can change your html like this :
<img class="one" src="img/1.png" alt="me">
<img class="two" src="img/2.png" alt="bulb">
and use this CSS:
img.one:hover + img.two {
opacity: 1;
}
because there is no backward in CSS.