how to hide HTML element with CSS - html

Question

I have two images, but I just want to show one of them. if I hover, it will change the image.
.sidenav {
height: 100%;
/* 100% Full-height */
width: 100px;
position: fixed;
/* Stay in place */
z-index: 2;
top: 0;
left: 0;
background-color: #fff;
overflow: hidden;
/* Disable horizontal scroll */
padding-top: 20px;
transition: 0.8s;
opacity: 0.8;
box-shadow: 0px 20px 50px black;
}
.sidenav:hover {
width: 215px;
transition: 0.8s;
overflow: hidden;
}
.sidenav img {
height: 10%;
width: auto;
padding-left: 13px;
transition: 0.8s;
}
.hovered {
visibility: hidden;
opacity: 0;
height: 13% !important;
transition: 0.5s;
}
.sidenav:hover img:first-child {
visibility: hidden;
opacity: 0;
}
.sidenav:hover .hovered {
visibility: visible;
opacity: 1;
}
<div class="sidenav">
<img src="../img/10.png">
<img src="../img/logo1.png" class="hovered">
</div>
My question is, how to hide the second image element? i can hide the image but it create a blank space. I dont used display: none; because I used transition. Any suggestion for me? thanks before

Answer 1

You should go for CSS as long as its possible. And fortunaterly for your requirement the use of CSS is totally possible.
I did that earlier for one of my similar requirement.
HTML :
<a class="foo" href="#">
<img src="http://lorempixel.com/400/200/food/1/" />
<img src="http://lorempixel.com/400/200/food/2/" />
</a>
CSS :
.foo img:last-child {
display: none
}
.foo:hover img:first-child {
display: none
}
.foo:hover img:last-child {
display: inline-block
}
JSFiddle : http://jsfiddle.net/nikdtu/9zcvsewr/

Answer 2

hovered image add position: absolute; with top: ...; left: ...
And second image will be above first image. You can manipulate positioning with top, left parameters.

Answer 3

you can use position:absolute for second image.
below is an example, I have used dummy images in this snippet
.sidenav {
height: 100%; /* 100% Full-height */
width: 100px;
position: fixed; /* Stay in place */
z-index: 2;
top: 0;
left: 0;
background-color: #fff;
overflow: hidden; /* Disable horizontal scroll */
padding-top: 20px;
transition: 0.8s;
opacity: 0.8;
box-shadow: 0px 20px 50px black;
}
.sidenav:hover{
width: 215px;
transition: 0.8s;
overflow: hidden;
}
.sidenav img{
height: 10%;
width: auto;
padding-left: 13px;
transition: 0.8s;
}
.hovered {
visibility: hidden;
opacity: 0;
height: 13% !important;
transition: 0.5s;
position:absolute;
top:20px;
left: 0;
}
.sidenav:hover img:first-child{visibility: hidden; opacity: 0;}
.sidenav:hover .hovered{visibility: visible; opacity: 1;}
<div class="sidenav">
<img src="https://dummyimage.com/qvga">
<img src="https://dummyimage.com/skyscraper/f0f/f" class="hovered">
</div>

Answer 4

Avoid the overhead of jquery if all you need is this small change.
Modify the given CSS definitions to these definitions. Then modify the HTML as show.
.sidenav {
height: 100%;
/* 100% Full-height */
width: 100px;
position: fixed;
/* Stay in place */
z-index: 2;
top: 0;
left: 0;
background-color: #fff;
overflow: hidden;
/* Disable horizontal scroll */
padding-top: 20px;
transition: 0.8s;
opacity: 0.8;
box-shadow: 0px 20px 50px black;
}
.sidenav:hover {
width: 215px;
transition: 0.8s;
overflow: hidden;
}
.sidenav .hover_image {
height: 10%;
width: 90px;
padding-left: 13px;
background-image: url('https://dummyimage.com/90x20/1b0/242499.png&text=Regular');
background-position: left top;
background-repeat: no-repeat;
}
.sidenav:hover .hover_image {
height: 13% !important;
width: 205px;
background-image: url('https://dummyimage.com/205x28/cb0/242499.png&text=Hovered');
}
<div class="sidenav">
<div class="hover_image"> </div>
</div>
Adjusting the height and width for the proper image size and checking the proper path is something you'll need to do. This must be the 'real' image size since it will not be scaled by the browser. (You are using pre-scaled, compressed images already, right?)