Inside the block there is a positioned icon, when you hover on which text appears and border. The bottom line is that you need not just the appearance of these elements - they must, as it were, leave from under it to the right. I tried to use the animation, but for some reason it does not work.

I would be very grateful if someone could help in solving the problem.

http://codepen.io/Vlastelin/pen/PZbOdY

.block { position: relative; margin: 30px auto; width: 30%;/* изменено для снипета*/ height: 100px;/* изменено для снипета*/ box-shadow: 0 0 5px 0 black; } .warning-box { display: inline-block; position: absolute; top: 8px; left: 10px; padding-right: 5px; color: #FFB700; border: 1px solid transparent; line-height: 1; } .warning-box p { display: none; } .warning-box .fa { color: #ffc107; font-size: 19px; position: absolute; top: -1px; left: -1px; } .warning-box:hover { width: 160px; border: 1px solid #ff8600; border-radius: 8px; translateX: 100px; transition: 1s; } .warning-box:hover .fa { color: #ff8600; transition: 200ms; } .warning-box:hover .text { display: inline-block; position: absolute; top: 2px; left: 10px; width: 150px; padding: 0 0 0 10px; margin: 0; font-family: "Open Sans"; font-size: 10px; line-height: 10px; color: #ff8600; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="block"> <div class="warning-box"> <i class="fa fa-exclamation-circle">&nbsp</i>&nbsp <p class="text">This app is no longer available</p> </div> </div>

  • Welcome to the site. Please note that the code executed in the browser can be made directly reproducible in the text of the question without references to external sources (you did something like this, but did not add CSS). The code that is not executed in the browser can be formed as a code, and not as a snippet - tutankhamun
  • Well, I will take note, now it seems I can no longer edit my question. - Igor
  • You can edit the question by clicking edit below the question text. - aleksandr barakin
  • Thank you all very much for your help! - Igor

2 answers 2

You need to put the width: 0px style on .warning-box .text initially. This block will hide. And on the .warning-box:hover .text put width: 150px; and add transition , then it will leave :)

Also note the white-space: nowrap; overflow:hidden; white-space: nowrap; overflow:hidden; . It is necessary that the text is forced to rise in one line.

Here is the type of this:
(Only .warning-box .text and .warning-box:hover .text have been changed from your example.)

 .block { position: relative; margin: 30px auto; width: 30%;/* изменено для снипета*/ height: 100px;/* изменено для снипета*/ box-shadow: 0 0 5px 0 black; } .warning-box { display: inline-block; position: absolute; top: 8px; left: 10px; padding-right: 5px; color: #FFB700; border: 1px solid transparent; line-height: 1; } .warning-box p { display: none; } .warning-box .fa { color: #ffc107; font-size: 19px; position: absolute; top: -1px; left: -1px; } .warning-box:hover { width: 160px; border: 1px solid #ff8600; border-radius: 8px; translateX: 100px; transition: 1s; } .warning-box:hover .fa { color: #ff8600; transition: 200ms; } .warning-box .text { width: 0px; position: absolute; display: inline-block; transition: 200ms; top: 2px; left: 10px; padding: 0 0 0 10px; margin: 0; font-family: "Open Sans"; font-size: 10px; line-height: 10px; color: #ff8600; white-space: nowrap; overflow:hidden; } .warning-box:hover .text { width: 150px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="block"> <div class="warning-box"> <i class="fa fa-exclamation-circle">&nbsp</i>&nbsp <p class="text">This app is no longer available</p> </div> </div>

    Another option is to add overflow:hidden properties to the .warning-box class and set the initial width, in this case width:20px;

     .block { position: relative; margin: 30px auto; width: 30%; height: 100px; box-shadow: 0 0 5px 0 black; } .warning-box { display: inline-block; position: absolute; top: 8px; left: 10px; padding-right: 5px; color: #FFB700; border: 1px solid transparent; line-height: 1; overflow:hidden; width:20px; } .warning-box p { display: none; } .warning-box .fa { color: #ffc107; font-size: 19px; position: absolute; top: -1px; } .warning-box:hover { width: 160px; border: 1px solid #ff8600; border-radius: 8px; translateX: 100px; transition: 1s; } .warning-box:hover .fa { color: #ff8600; transition: 200ms; } .warning-box:hover .text { display: inline-block; position: absolute; top: 2px; left: 10px; width: 150px; padding: 0 0 0 10px; margin: 0; font-family: "Open Sans"; font-size: 10px; line-height: 10px; color: #ff8600; } 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="block"> <div class="warning-box"> <i class="fa fa-exclamation-circle">&nbsp</i>&nbsp <p class="text">This app is no longer available</p> </div> </div>