Perhaps the question will seem trivial, but maybe I just do not know how to google, but still. How is it possible when clicking or hover on a <div> move it in such a way that it partially goes beyond the parent, as with a chat telegram in a telegram or viber? And is it possible to do it on pure css. Here is an example (crooked, but it seems to be clear): Own layout

Example from Telegram: Telegram

<div> markup:

 <div class="todoitem clicked"> <label class="label"> <input class="label__checkbox" type="checkbox" /> <span class="label__text"> <span class="label__check"> <i class="fa fa-check icon"></i> </span> </span> </label> <div class="definition"> <input type="text" name="todoTitle" readonly="true" class="title" value="Todo title 1"> <textarea rows="2" cols="41" readonly="true" maxlength="123" name="todoDescription" class="description">Todo description 2 sdgsdgsdg sg sdg sdg sdgs dg sdgsd gsdg sdg sd gsd gsd gg </textarea> <div class="id">id: c - h72gsb32 - 0000 - udoc - l363eofy</div> </div> </div>

Thank you in advance for all the answers :)

  • Parent set overflow: hidden and shift the element itself by the property transform: translateX () or translateY () depending on which way to move ... If I understood the question correctly. - l2banners

1 answer 1

Here is the solution, when hovering over a square, the circle will smoothly shift downwards

 .wrapper { position: relative; width: 200px; height: 200px; margin: 0 auto; border: 1px solid #000; } .block { position: absolute; left: 50%; bottom: 50px; width: 50px; height: 50px; margin: -25px; background: #f00; border-radius: 50%; transition: all 1s; } .wrapper:hover .block { transform: translateY(50px); } 
 <div class="wrapper"> <div class="block"></div> </div>