Padding statement transition with background and image and text? - html

Question

[Note: scroll to the bottom to see exactly what I need]
I am trying to do some kind of simple decoration to my image in HTML. The decoration is to show information about the image with sliding animation only when hovered with the mouse. I tried to make it, but at some point I couldn't figure out how to put the text information in the slider. I tried to make <div> tag to put the text, but it's shows only under the image. While in my situation, I want it to be perfectly behind it.
Here is how I made them:
img.img1, div.img1 {
width: 150px;
margin: 5px 0px 5px 0px;
border: 10px solid rgb(0,0,150);
background: rgb(0,0,150);
padding-right: 0px;
transition: 0.5s;
color: #fff;
font-size: 12px;
writing-mode: vertical-rl;
text-orientation: mixed;
}
img.img1:hover, div.img1:hover {
padding-right: 150px;
}
<img class="img1" src="https://i.pinimg.com/originals/34/b5/86/34b58689b0870284621a661a2c538652.png">
<div class="img1">
<p>Name: Eren Yeager</p>
<p>Age: 20 y.o</p>
<p>Anime: Attack On Titan</p>
<p>Height: 195cm</p>
<p>Living in: Shiganshina District</p>
</div>
In the script above, I don't want the slider to just slide without the text. I want it to slide and sliding the text with it so it'll look like this:
img.img1, div.img1 {
width: 150px;
margin: 5px 0px 5px 0px;
border: 10px solid rgb(0,0,150);
background: rgb(0,0,150);
margin-left: 0px;
transition: 0.5s;
color: #fff;
font-size: 12px;
writing-mode: vertical-rl;
text-orientation: mixed;
}
img.img1:hover {
padding-right: 150px;
}
div.img1:hover {
margin-left: 150px;
}
<img class="img1" src="https://i.pinimg.com/originals/34/b5/86/34b58689b0870284621a661a2c538652.png">
<div class="img1">
<p>Name: Eren Yeager</p>
<p>Age: 20 y.o</p>
<p>Anime: Attack On Titan</p>
<p>Height: 195cm</p>
<p>Living in: Shiganshina District</p>
</div>
In the end. What I want is:
The image information is hiding behind the image (the user can't see them).
Once the user hover over the image, the information will slide from behind the image.
Example:
img.img1, div.img1 {
display: inline-block;
width: 150px;
margin: 0px 0px 0px 0px;
border: 10px solid rgb(0,0,150);
background: rgb(0,0,150);
margin-left: 0px;
transition: 0.5s;
color: #fff;
font-size: 12px;
writing-mode: vertical-rl;
text-orientation: mixed;
}
img.img2, div.img2 {
display: inline-block;
width: 150px;
margin: 0px 0px 0px 0px;
border: 10px solid rgb(0,0,150);
background: rgb(0,0,150);
margin-left: 0px;
transition: 0.5s;
color: #fff;
font-size: 12px;
writing-mode: vertical-rl;
text-orientation: mixed;
}
<img class="img1" src="https://i.pinimg.com/originals/34/b5/86/34b58689b0870284621a661a2c538652.png">
<br>
<br>
<p>When the user hover:</p>
<br>
<br>
<img class="img2" src="https://i.pinimg.com/originals/34/b5/86/34b58689b0870284621a661a2c538652.png">
<div class="img2">
<p>Name: Eren Yeager</p>
<p>Age: 20 y.o</p>
<p>Anime: Attack On Titan</p>
<p>Height: 195cm</p>
<p>Living in: Shiganshina District</p>
</div>
If I needed to use JavaScript to do it, then it's fine I'll use it.

Answer 1

First, put them in a wrapper
Then by using position:absolute; on the <div class="img2"> as well as giving it top:0; right:0; will make the info div cling unto the upper-right corner of the wrapper so that whenever the wrapper extends to the right, the div.img2 will move to the right as well
Next give the img.img2 a z-index:10; to make it float/appear on top of everything else;
Finally assign the :hover to the wrapper. Add padding-left:150px; with a transition: padding .5s and your done.
[Note from Liqui Kal: If the background does not fit perfectly behind the image, then change the statement display: inline-block; to display: inline-flex;]
We can use inline-flex / inline-grid to center the image using align-items:center to vertically align the image but we can't justify it because when justified to the center, the image will move along the expansion of the parent div. - StepPen-codes
let radioBtn = document.querySelectorAll('input[type=radio]')
for (let btn of radioBtn) btn.addEventListener('change', function(event) {
document.documentElement.style.setProperty('--text-align', event.target.value)
})
:root {
--text-align: left;
}
.imgWCap {
position: relative;
display: inline-flex;
align-items: center;
background: rgb(0, 0, 150);
transition: 0.5s;
}
.imgWCap:hover {
padding-right: 140px;
background: rgb(0, 0, 150);
}
.img2 {
padding: 10px;
}
img.img2 {
position: relative;
width: 150px;
margin: 0;
z-index: 10;
}
div.img2 {
position: absolute;
right: -10px;
font-size: 12px;
color: #fff;
text-align: var(--text-align);
/*Here is the the text align at work;*/
writing-mode: vertical-rl;
}
HOVER OVER THE PICTURE <br>
<div class="imgWCap">
<img class="img2" src="https://i.pinimg.com/originals/34/b5/86/34b58689b0870284621a661a2c538652.png">
<div class="img2">
<p>Name: Eren Yeager</p>
<p>Age: 20 y.o</p>
<p>Anime: Attack On Titan</p>
<p>Height: 195cm</p>
<p>Living in: Shiganshina District</p>
</div>
</div>
<br>Pick the text-alignment that you need.
<form>
<label for=left>Left</label><input id=left name=align type=radio value=left>
<label for=center>Center</label><input id=center name=align type=radio value=center>
<label for=right>right</label><input id=right name=align type=radio value=right>
</form>