HTML CSS Overflow on hover without changing positions - html

Question

Can anyone kindly help me out with my css+html issue? Please refer the code snippet I have added.
What I need to achive,
1. The boxes(.box) with images to stay fixed
2. The hidden description (.hidden) to go over the below image box when hovered without moving it
Can someone please help me figuring this out?
.box {
width: 170px;
transition: all .4s ease;
border-bottom: 10px solid #fff;
color:#000 !important;
}
#caption {
width: 160px;
font-size:15px;
text-decoration:none;
margin: 0 0 0px 5px;
}
.boximg{
width: auto;
max-width: 100%;
margin-bottom: 8px;
}
.box:hover {
width: auto;
max-width: 170px;
border-bottom: 10px solid #000;
transition: all .4s ease;
color:#ccdc29 !important;
background-color:#000;
}
.box:hover > #hidden {
display:block;
transition: all .3s ease;
overflow-x: hidden;
}
#hidden {
display:none;
color:#fff;
margin:5px;
transition: all .3s ease;
}
.image_off, #home:hover .image_on{
display:none;
transition: all .4s ease;
}
.image_on, #home:hover .image_off{
display:block;
transition: all .4s ease;
}
<div class="box">
<a href="#">
<img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ" />
<br>
</a>
<p id="caption">Lorem Ipsum</p>
<p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur, 7</p>
</div>
<div class="box">
<a href="#">
<img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ" />
<br>
</a>
<p id="caption">Lorem Ipsum</p>
<p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur</p>
</div>
Thanks heaps!

Answer 1

Try the following. I have fixed your nested anchors, removed some duplicate ids and positioned the caption absolutely. The only thing I would say is the caption has an 18px minus margin - not sure what creates that gap for the margin to be needed
Also if you want to stop the blinking effect, you need to use the same size images - your hover one is slightly larger
.box {
width: 170px;
transition: all .4s ease;
color: #000 !important;
position:relative;
padding:0;
margin-bottom:10px;
}
.box > a
.box span,
.box img {
display:block;
}
#caption {
width: 160px;
font-size: 15px;
text-decoration: none;
margin: 0 0 0px 5px;
}
.boximg {
width: auto;
max-width: 100%;
}
.box:hover {
width: auto;
max-width: 170px;
transition: all .4s ease;
color: #ccdc29 !important;
z-index:2;
}
.box:hover>#caption {
display:none;
}
.box:hover>#hidden {
display: block;
transition: all .3s ease;
background-color: #000;
}
#hidden {
display: none;
color: #fff;
transition: all .3s ease;
position:absolute;
left:0;
right:0;
top:100%;
padding:5px;
margin:-18px 0 0 0;
}
.box .image_off,
#home:hover .image_on {
display: none;
transition: all .4s ease;
}
.box .image_on,
#home:hover .image_off {
display: block;
transition: all .4s ease;
}
<div class="box">
<a href="#">
<span class="boximg" id="home"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ"
/></span>
<br>
</a>
<p id="caption">Lorem Ipsum</p>
<p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur, 7</p>
</div>
<div class="box">
<a href="#">
<span class="boximg" id="home1"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ"
/></span>
<br>
</a>
<p id="caption">Lorem Ipsum</p>
<p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur</p>
</div>

Answer 2

.img-with-text{
position: relative;
width: 170px;
}
.img-with-text > div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0);
color: transparent;
transition: 1s;
}
.img-with-text > div:hover{
background-color: rgba(0, 0, 0, 0.6);
color: white;
}
<div class="img-with-text">
<img src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" alt="image" width="170">
<div><h2>Hello!</h2></div>
</div>
<div class="img-with-text">
<img src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" alt="image" width="170">
<div><h2>Hello!</h2></div>
</div>