Html Question posted in
Some basic documentation can be found here.

Html – What is the method to make the text appear on the right in all blocks at once during the transition?

enter image description hereIt is necessary that when you hover the mouse cursor over the left vertical block, the width of the block increases.
There are 5 more blocks inside the parent block.
There are pictures inside these blocks themselves. It is necessary that when the cursor hovers over the parent block, text is displayed to the right of the images.
I managed to achieve an increase in the width of the parent block when hovering the cursor. The pseudo Hover class helped me with this.
I have absolutely no idea how you can make text appear to the right of images when you hover the cursor. Where and how should this be done? So far, this is a big and unresolved task for me.

 In the photo, I displayed the initial state and the final state. how it should turn out as a result.


The pseudo Hover class was used. A transition was involved. Transition-duration tag: 1s;

         <!DOCTYPE html>
          <html lang="en">
           <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="Style.css">
             <title>Document</title>
             </head>
             <body>
            <div class="Wrapper">
           <div class="Block1">
            <div class="Text1"><p>MENU</p></div>
            <div class="ST1 IM">
                <img src="1.png" alt="">
                <p> EDIT</p>
                <p class="Edit"></p>
            </div>
            <div class="ST2">
                <img src="2.png" alt="">
            </div>
            <div class="ST3">
                <img src="3.png" alt="">
            </div>
            <div class="ST4">
                <img src="4.png" alt="">
            </div>
            <div class="ST5">
                <img src="5.png" alt="">
            </div>
        </div>
        
        <div class="Block2">
        <P>

            
         <h4>WHAT IS LOREM IPSUM?</h4>


         </div>
          </P>
           </div>

         </body>
         </html>


          body {
          font-family: 'Segoe UI', Tahoma, sans-serif;
         font-size: 14px;
         }

        .Wrapper {
         width: 941px;
          height: 3000px;
         margin: 0 auto;
         display: flex;
         position: relative;
         }

        .Block1 {
         width: 88px;
         height: 3000px;
         background-color: #8a8a8a;
         padding-top: 64px;
         position: fixed;
         transition-duration: 1s;
        }

      .Block2 {
       width: 936px;
        height: 3000px;
        background-color: #f6f6f6;
        padding: 30px 90px 15px 165px;
       }

     .Text1 {
      position: absolute;
    top: 14px;
     left: 25px;
     }

     div p {
    color: white;
     }

    .IM {
    height: 90px;
    padding: 5px 15px 0 26px;
    border: 2px solid red;
    }


    .ST1, .ST2, .ST3, .ST4, .ST5 {
    height: 76px;
    padding: 0px 15px 0 17px;
     border: 2px solid red; 
    display: flex;
    align-items: center;
    justify-content: center;
       transition-duration: 1s;
          }


          .Block1:hover {

          width: 216px;
         }

        .ST1:hover, .ST2:hover, .ST3:hover, .ST4:hover, .ST5:hover {

         width: 181px;
         background-color: #696969;

         }
Tags:

2

Answers


  1. 0

    I’m assuming your CSS code is written in a separate file.
    In .ST1, .ST2, .ST3, .ST4, .ST5, change justify-content: center; to justify-content: space-between;

    If you want to push the text completely to the right, add this to your CSS:

    .ST1 p,
.ST2 p,
.ST3 p,
.ST4 p,
.ST5 p {
    text-align: right;
}

    If the images in the sidebar are too big, they will push the text to a new line. Add a class like class='sidebar-img' to each <img> in your HTML, and add the following to your CSS:

    .sidebar-img {
    width: 30%;
}
    Login or Signup to reply.
  2. 0

    The first part of your recommendation helped. text now appears after moving to the right on hover. However, another problem appeared. The text is now initially on the right. Look at the line that says EDIT. It shouldn’t be there in the original state.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search