How to make text appear next to centered image after it moves? - css

Question

Basically, I have this one block that I want to center in the middle of the page. This block should technically have both an image, and text. When the block isn't hovered over, I want only the image to appear centered on the page. When the block is hovered over, I want the image to move to the left a bit, and have the text appear to the right of it. So far, I've managed to make the image centered, to make it move to the left on hover, and to get the hover to display the text. The problem is, the text is under the image. I understand this is because the image and the text are in different div's, and so it would make sense that it would appear after. However, I'm not sure how to both make them in the same div, and ensure that the image is dead-center on the page when the block isn't hovered over. Is this possible?
Specifically, here's the HTML code for that section so far:
<section class="about-us">
<!-- Image division -->
<div class="chatBox">
<img src='./art/chatboxAbout.png' width= "150" height = "150" />
</div>
<!-- Text division, the actual about-us part -->
<div class="about-us-text-container">
<!-- Header part -->
<h1>about us</h1>
<!-- Horizontal line for styling -->
<hr />
<!-- Actual text -->
<p>For artists, not by artists</p>
</div>
</section>
and the CSS:
/* General sizing and format for the about-us segment */
.about-us{
width: 100%;
height: 200vh;
background-color: #fff;
}
/* Formatting for the chatBox image, basic stuff */
.about-us .chatBox{
position: relative;
margin-top: 50px;
text-align: center;
transition: transform 0.3s ease; /* Preparing for transition */
transition: translateX(0px); /* What the transition is */
}
/* Move left on hover effect */
.chatBox:hover{
transform: translateX(-200px);
}
/* Formatting for the general text div */
.about-us .about-us-text-container{
margin-top: 50px;
text-align:center;
margin-left: 15px;
opacity: 0; /* Don't display unless hovered */
transform: 1s; /* Setting duration for the hover opacity transition */
}
/* Show on hover effect */
.chatBox:hover + .about-us-text-container{
opacity: 1;
}
/* Formatting for the header */
.about-us .about-us-text-container h1{
}
/* Formatting for the horizontal line */
.about-us .about-us-text-container hr{
}
/* Formatting for the paragraph */
.about-us .about-us-text-container p{
}
Here's the JSFiddle link for the entire code so far: https://jsfiddle.net/bypvm6fu/
Any help is appreciated! Thank you so much!

Answer 1

Here's a possible solution for you. I changed a lot in your code, main things being: The container just contains the elements you already have (not 200vh = twice the window height). Just add another container around that, and sibling following it. The transition affects all, i.e. width, opacity and transform: scale to keep the image centered when not hovered. And the hover is on the container, not on the image, that way preventing the jumping effect you had before:
.about-us {
width: 100%;
height: 150px;
background-color: #fff;
display: flex;
justify-content: center;
align-content: center;
margin-top: 50px;
}
.about-us .chatBox {
position: relative;
text-align: center;
}
.about-us .about-us-text-container {
text-align: center;
margin-left: 15px;
opacity: 0;
transition: all 1s;
width: 0;
transform: scale(0);
}
.about-us:hover .about-us-text-container {
opacity: 1;
width: 150px;
transform: scale(1);
}
<section class="about-us">
<div class="chatBox">
<img src="https://picsum.photos/150" width="150" height="150" />
</div>
<div class="about-us-text-container">
<h1>about us</h1>
<hr />
<p>For artists, not by artists</p>
</div>
</section>