codepen

.container { margin: 20px 0 0 50px; width: 500px; position: relative; } .container:hover .circle { animation-name: anim; animation-duration: 0.5s; animation-fill-mode: forwards } .container:hover .title { color: #fff; } .circle { display: inline-block; position: absolute; width: 100px; height: 100px; border-radius: 50%; background-color: blue; } .title { margin-left: 130px; } @keyframes anim { 0 { border-radius: 50%; } 1% { border-radius: 50px 45px 45px 50px; } 100% { width: 100%; border-radius: 50px 3px 3px 50px; } } 
 <div class="container"> <div class="circle"></div> <div class="title"> <h2>МОИ ДОМЕНЫ</h2> <p>размещение/редактирование размещения/удаление</p> </div> </div>

Tell me how to make the text displayed on top of the animation, like here.

enter image description here and when you shoot the guidance the animation was played in the opposite direction.

    4 answers 4

     .container { margin: 20px 0 0 50px; width: 500px; height: 100px; position: relative; } .container:hover .circle { width: 100%; border-radius: 50px 3px 3px 50px; } .container:hover .title { color: #fff; } .circle { position: absolute; width: 100px; height: 100px; border-radius: 50px; background-color: blue; transition: all .5s linear 0s; } .title { margin-left: 130px; z-index: 1; position: absolute; } 
     <div class="container"> <div class="circle"></div> <div class="title"> <h2>МОИ ДОМЕНЫ</h2> <p>размещение/редактирование размещения/удаление</p> </div> </div>

    • Try without animation through the transition, as an alternative. - Dhunga
    • Another small question, can you tell me how to center the icon in the circle so that it does not leave when expanding the block? - kost1k

    Place the layer above

     .title { position: absolute; z-index: 1; margin-left: 130px; } 

       .container { margin: 20px 0 0 50px; width: 500px; height: 100px; position: relative; } .container:hover .circle { width: 100%; border-radius: 50px 3px 3px 50px; } .container:hover .title { color: #fff; } .circle { position: absolute; width: 100px; height: 100px; border-radius: 50px; background-color: blue; transition: all .5s linear 0s; } .circle .img { max-width: 100%; display: block; position: relative; top: 10px; left: .8rem; } .title { margin-left: 130px; z-index: 1; position: absolute; } 
       <div class="container"> <div class="circle"> <img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAClUExURUdwTNOGAD0iGgCahV52RLWGIz0iGj8kHACxmQObhACahUUnGC1LPgCahQCahd2ZBz0iGu6fANiIAD0iGuiYAOeXAOucAOSUAOCbAj6SW9ODAF4+M//JHf+/CgC1nQC4oGNDNwC9o//FFv+5Av3CFFc5LwKzmU8yJ2tJO+eYAOaxHPGkAPiwAgSljI1pNNOjIXpXKp58JuCRADw9PsWXJlJLOW+cSdLCGrMAAAAbdFJOUwD80kER/a/+uv10lCfcpS1u32ZHhkXYw5XRdo2WTKQAAAQ4SURBVFjD1ZhpY6IwEIaLEKkK4m13EaUYQO6jtP//p+1MOBYVJfhp9+UoDOThzUw47NvbfyVJWS9mY6bZYq1IL2KUxXgktzQaL5RXMDOkuLaumyBdt11kzYaipAVgXGBcGgENWKPFoA5KsxJjXioSbpglajaAJI1l2WYYs0Q0JNOW5bEyxI9tstzcYNDUAE8L4OhmowpTknT0tODjrEfI0RtL9aoEQf3k0ZozQa6OallqMIzkymOezq2xY8ipPZktDrsCdI7HUm2o7ekaxGdJwQzZJUdvmSr39MqSq3CUDG+LK1QzlRTdhttlwdMz29Yb3VBKFIDGPD3Da9ae7mQzS/JI4aiZbZdZsrswOh7mqBumiJEubOy1esk2zUsJ6k/SjIH0OPGTgmRxmqbl7Q8bcUYKCMc6A824QDE9VKJ+rSYS2y4HCIvm6snhiRKuso0QlNJnIJqioxEPKDs8VcYLsovnoMLmA7kmJtYvCEn8dns/IaRgh0yXzxGkiBJW9riV9SRm44BQTFI/CKoGKbJI9Q5KwYHF5qQaUBeCSeqvGpafACjOClDMLFmlobhIiiKLiXUgHOXHAZkcLBiHWRoX1LdAB1xZPi3iNPMptQ5J/4DENxHkGtrGX19f34mFm2wFnr4hFFPY9U25D6QRV07Rho+tvjKrpQwj3+xgKrtEewpaCZmc0j4QTeVMWD0F/RbylIFo/A1K2qACIzE7mKa58LvHkUcydq6fgKhFW8IIM0Qz4vU42gq5lyOIEa4wzS4cg5OE7fOq7XMvMCg12gDjehcCgZfve95sKyEHkGHBDBOuw8ALvLDcr6cg7+kZWNoIXggAONtgKxp6oNDAGMxsCT1h0/uqlVa70DAqCmsXBkHJqWLUCHcrnq+IVXCurly1blQ5Ogcrru8jrbZUCR7814Fwp/F9aW2YpRpDYhDx/0bOwYbz009bhsa5muDpQfDhESdNKFxyGoIbhVmC5exnRXgGgS+fBTD3vIZwWAbnUn5whqIFAdtCQcf2Az60tV2AbVjDECzhYpSRYKe9DdB2WXu6UbDcDvsxAqTwHhMO5gBpf08Kg/1gDuRpA6ZarBDsbLS3V7T9WMJtVikIlh/btxclaR/weGLy8g/tpZ+ikihOp/P5L8GrJPyaz6dTURxCU8TpXFUnTDUoFyYR7qvqfMoHUwACDaIocpzjKYJneAWKTkfHiZCmvvezRKQA4/hZyiEAQlZOnDJyAhrA3qdSL8Y5ff7VT2kpF35awSOy1IcoaareUNBSJuQgIXOu40dAvYvdnDm4OX3egD6dn4yQ7OeagyeBK3XazUE7JzyrPUELEESvguyPM5l0kKbI6RS26VYXSVQnDzhPdHQm6m2eoGNdZ9bzI1J0a0lRYezc61TPDzVRrweBOImOLymaiLegLkdHp5oeyOkEvaQ70Pz9Rc3Ff/Ufe38ALWg6T1nv0qoAAAAASUVORK5CYII="> </div> <div class="title"> <h2>МОИ ДОМЕНЫ</h2> <p>размещение/редактирование размещения/удаление</p> </div> </div> = "data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAABGdBTUEAALGPC / xhBQAAAAFzUkdCAK7OHOkAAAClUExURUdwTNOGAD0iGgCahV52RLWGIz0iGj8kHACxmQObhACahUUnGC1LPgCahQCahd2ZBz0iGu6fANiIAD0iGuiYAOeXAOucAOSUAOCbAj6SW9ODAF4 + M // JHf + / CgC1nQC4oGNDNwC9o // FFv + 5Av3CFFc5LwKzmU8yJ2tJO + eYAOaxHPGkAPiwAgSljI1pNNOjIXpXKp58JuCRADw9PsWXJlJLOW + cSdLCGrMAAAAbdFJOUwD80kER / a / + uv10lCfcpS1u32ZHhkXYw5XRdo2WTKQAAAQ4SURBVFjD1ZhpY6IwEIaLEKkK4m13EaUYQO6jtP // p + 1MOBYVJfhp9 + UoDOThzUw47NvbfyVJWS9mY6bZYq1IL2KUxXgktzQaL5RXMDOkuLaumyBdt11kzYaipAVgXGBcGgENWKPFoA5KsxJjXioSbpglajaAJI1l2WYYs0Q0JNOW5bEyxI9tstzcYNDUAE8L4OhmowpTknT0tODjrEfI0RtL9aoEQf3k0ZozQa6OallqMIzkymOezq2xY8ipPZktDrsCdI7HUm2o7ekaxGdJwQzZJUdvmSr39MqSq3CUDG + <div class="container"> <div class="circle"> <img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAClUExURUdwTNOGAD0iGgCahV52RLWGIz0iGj8kHACxmQObhACahUUnGC1LPgCahQCahd2ZBz0iGu6fANiIAD0iGuiYAOeXAOucAOSUAOCbAj6SW9ODAF4+M//JHf+/CgC1nQC4oGNDNwC9o//FFv+5Av3CFFc5LwKzmU8yJ2tJO+eYAOaxHPGkAPiwAgSljI1pNNOjIXpXKp58JuCRADw9PsWXJlJLOW+cSdLCGrMAAAAbdFJOUwD80kER/a/+uv10lCfcpS1u32ZHhkXYw5XRdo2WTKQAAAQ4SURBVFjD1ZhpY6IwEIaLEKkK4m13EaUYQO6jtP//p+1MOBYVJfhp9+UoDOThzUw47NvbfyVJWS9mY6bZYq1IL2KUxXgktzQaL5RXMDOkuLaumyBdt11kzYaipAVgXGBcGgENWKPFoA5KsxJjXioSbpglajaAJI1l2WYYs0Q0JNOW5bEyxI9tstzcYNDUAE8L4OhmowpTknT0tODjrEfI0RtL9aoEQf3k0ZozQa6OallqMIzkymOezq2xY8ipPZktDrsCdI7HUm2o7ekaxGdJwQzZJUdvmSr39MqSq3CUDG+LK1QzlRTdhttlwdMz29Yb3VBKFIDGPD3Da9ae7mQzS/JI4aiZbZdZsrswOh7mqBumiJEubOy1esk2zUsJ6k/SjIH0OPGTgmRxmqbl7Q8bcUYKCMc6A824QDE9VKJ+rSYS2y4HCIvm6snhiRKuso0QlNJnIJqioxEPKDs8VcYLsovnoMLmA7kmJtYvCEn8dns/IaRgh0yXzxGkiBJW9riV9SRm44BQTFI/CKoGKbJI9Q5KwYHF5qQaUBeCSeqvGpafACjOClDMLFmlobhIiiKLiXUgHOXHAZkcLBiHWRoX1LdAB1xZPi3iNPMptQ5J/4DENxHkGtrGX19f34mFm2wFnr4hFFPY9U25D6QRV07Rho+tvjKrpQwj3+xgKrtEewpaCZmc0j4QTeVMWD0F/RbylIFo/A1K2qACIzE7mKa58LvHkUcydq6fgKhFW8IIM0Qz4vU42gq5lyOIEa4wzS4cg5OE7fOq7XMvMCg12gDjehcCgZfve95sKyEHkGHBDBOuw8ALvLDcr6cg7+kZWNoIXggAONtgKxp6oNDAGMxsCT1h0/uqlVa70DAqCmsXBkHJqWLUCHcrnq+IVXCurly1blQ5Ogcrru8jrbZUCR7814Fwp/F9aW2YpRpDYhDx/0bOwYbz009bhsa5muDpQfDhESdNKFxyGoIbhVmC5exnRXgGgS+fBTD3vIZwWAbnUn5whqIFAdtCQcf2Az60tV2AbVjDECzhYpSRYKe9DdB2WXu6UbDcDvsxAqTwHhMO5gBpf08Kg/1gDuRpA6ZarBDsbLS3V7T9WMJtVikIlh/btxclaR/weGLy8g/tpZ+ikihOp/P5L8GrJPyaz6dTURxCU8TpXFUnTDUoFyYR7qvqfMoHUwACDaIocpzjKYJneAWKTkfHiZCmvvezRKQA4/hZyiEAQlZOnDJyAhrA3qdSL8Y5ff7VT2kpF35awSOy1IcoaareUNBSJuQgIXOu40dAvYvdnDm4OX3egD6dn4yQ7OeagyeBK3XazUE7JzyrPUELEESvguyPM5l0kKbI6RS26VYXSVQnDzhPdHQm6m2eoGNdZ9bzI1J0a0lRYezc61TPDzVRrweBOImOLymaiLegLkdHp5oeyOkEvaQ70Pz9Rc3Ff/Ufe38ALWg6T1nv0qoAAAAASUVORK5CYII="> </div> <div class="title"> <h2>МОИ ДОМЕНЫ</h2> <p>размещение/редактирование размещения/удаление</p> </div> </div> IaRgh0yXzxGkiBJW9riV9SRm44BQTFI / CKoGKbJI9Q5KwYHF5qQaUBeCSeqvGpafACjOClDMLFmlobhIiiKLiXUg <div class="container"> <div class="circle"> <img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAClUExURUdwTNOGAD0iGgCahV52RLWGIz0iGj8kHACxmQObhACahUUnGC1LPgCahQCahd2ZBz0iGu6fANiIAD0iGuiYAOeXAOucAOSUAOCbAj6SW9ODAF4+M//JHf+/CgC1nQC4oGNDNwC9o//FFv+5Av3CFFc5LwKzmU8yJ2tJO+eYAOaxHPGkAPiwAgSljI1pNNOjIXpXKp58JuCRADw9PsWXJlJLOW+cSdLCGrMAAAAbdFJOUwD80kER/a/+uv10lCfcpS1u32ZHhkXYw5XRdo2WTKQAAAQ4SURBVFjD1ZhpY6IwEIaLEKkK4m13EaUYQO6jtP//p+1MOBYVJfhp9+UoDOThzUw47NvbfyVJWS9mY6bZYq1IL2KUxXgktzQaL5RXMDOkuLaumyBdt11kzYaipAVgXGBcGgENWKPFoA5KsxJjXioSbpglajaAJI1l2WYYs0Q0JNOW5bEyxI9tstzcYNDUAE8L4OhmowpTknT0tODjrEfI0RtL9aoEQf3k0ZozQa6OallqMIzkymOezq2xY8ipPZktDrsCdI7HUm2o7ekaxGdJwQzZJUdvmSr39MqSq3CUDG+LK1QzlRTdhttlwdMz29Yb3VBKFIDGPD3Da9ae7mQzS/JI4aiZbZdZsrswOh7mqBumiJEubOy1esk2zUsJ6k/SjIH0OPGTgmRxmqbl7Q8bcUYKCMc6A824QDE9VKJ+rSYS2y4HCIvm6snhiRKuso0QlNJnIJqioxEPKDs8VcYLsovnoMLmA7kmJtYvCEn8dns/IaRgh0yXzxGkiBJW9riV9SRm44BQTFI/CKoGKbJI9Q5KwYHF5qQaUBeCSeqvGpafACjOClDMLFmlobhIiiKLiXUgHOXHAZkcLBiHWRoX1LdAB1xZPi3iNPMptQ5J/4DENxHkGtrGX19f34mFm2wFnr4hFFPY9U25D6QRV07Rho+tvjKrpQwj3+xgKrtEewpaCZmc0j4QTeVMWD0F/RbylIFo/A1K2qACIzE7mKa58LvHkUcydq6fgKhFW8IIM0Qz4vU42gq5lyOIEa4wzS4cg5OE7fOq7XMvMCg12gDjehcCgZfve95sKyEHkGHBDBOuw8ALvLDcr6cg7+kZWNoIXggAONtgKxp6oNDAGMxsCT1h0/uqlVa70DAqCmsXBkHJqWLUCHcrnq+IVXCurly1blQ5Ogcrru8jrbZUCR7814Fwp/F9aW2YpRpDYhDx/0bOwYbz009bhsa5muDpQfDhESdNKFxyGoIbhVmC5exnRXgGgS+fBTD3vIZwWAbnUn5whqIFAdtCQcf2Az60tV2AbVjDECzhYpSRYKe9DdB2WXu6UbDcDvsxAqTwHhMO5gBpf08Kg/1gDuRpA6ZarBDsbLS3V7T9WMJtVikIlh/btxclaR/weGLy8g/tpZ+ikihOp/P5L8GrJPyaz6dTURxCU8TpXFUnTDUoFyYR7qvqfMoHUwACDaIocpzjKYJneAWKTkfHiZCmvvezRKQA4/hZyiEAQlZOnDJyAhrA3qdSL8Y5ff7VT2kpF35awSOy1IcoaareUNBSJuQgIXOu40dAvYvdnDm4OX3egD6dn4yQ7OeagyeBK3XazUE7JzyrPUELEESvguyPM5l0kKbI6RS26VYXSVQnDzhPdHQm6m2eoGNdZ9bzI1J0a0lRYezc61TPDzVRrweBOImOLymaiLegLkdHp5oeyOkEvaQ70Pz9Rc3Ff/Ufe38ALWg6T1nv0qoAAAAASUVORK5CYII="> </div> <div class="title"> <h2>МОИ ДОМЕНЫ</h2> <p>размещение/редактирование размещения/удаление</p> </div> </div> RbylIFo / A1K2qACIzE7mKa58LvHkUcydq6fgKhFW8IIM0Qz4vU42gq5lyOIEa4wzS4cg5OE7fOq7XMvMCg12gDjehcCgZfve95sKyEHkGHBDBOuw8ALvLDcr6cg7 + kZWNoIXggAONtgKxp6oNDAGMxsCT1h0 / uqlVa70DAqCmsXBkHJqWLUCHcrnq + IVXCurly1blQ5Ogcrru8jrbZUCR7814Fwp / F9aW2YpRpDYhDx / 0bOwYbz009bhsa5muDpQfDhESdNKFxyGoIbhVmC5exnRXgGgS + fBTD3vIZwWAbnUn5whqIFAdtCQcf2Az60tV2AbVjDECzhYpSRYKe9DdB2WXu6UbDcDvsxAqTwHhMO5gBpf08Kg / 1gDuRpA6ZarBDsbLS3V7T9WMJtVikIlh / btxclaR / weGLy8g / tpZ + ikihOp / P5L8GrJPyaz6dTURxCU8TpXFUnTDUoFyYR7qvqfMoHUwACDaIocpzjKYJneAWKTkfHiZCmvvezRKQA4 / hZyiEAQlZOnDJyAhrA3qdSL8Y5ff7VT2kpF35awSOy1IcoaareUNBSJuQgIXOu40dAvYvdnDm4OX3egD6dn4yQ7OeagyeBK3XazUE7JzyrPUELEESvguyPM5l0kKbI6RS26VYXSVQnDzhPdHQm6m2eoGNdZ9bzI1J0a0lRYezc61TPDzVRrweBOImOLymaiLegLkdHp5oeyOkEvaQ70Pz9Rc3Ff / Ufe38ALWg6T1nv0qoAAAAASUVORK5CYII = "> <div class="container"> <div class="circle"> <img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAClUExURUdwTNOGAD0iGgCahV52RLWGIz0iGj8kHACxmQObhACahUUnGC1LPgCahQCahd2ZBz0iGu6fANiIAD0iGuiYAOeXAOucAOSUAOCbAj6SW9ODAF4+M//JHf+/CgC1nQC4oGNDNwC9o//FFv+5Av3CFFc5LwKzmU8yJ2tJO+eYAOaxHPGkAPiwAgSljI1pNNOjIXpXKp58JuCRADw9PsWXJlJLOW+cSdLCGrMAAAAbdFJOUwD80kER/a/+uv10lCfcpS1u32ZHhkXYw5XRdo2WTKQAAAQ4SURBVFjD1ZhpY6IwEIaLEKkK4m13EaUYQO6jtP//p+1MOBYVJfhp9+UoDOThzUw47NvbfyVJWS9mY6bZYq1IL2KUxXgktzQaL5RXMDOkuLaumyBdt11kzYaipAVgXGBcGgENWKPFoA5KsxJjXioSbpglajaAJI1l2WYYs0Q0JNOW5bEyxI9tstzcYNDUAE8L4OhmowpTknT0tODjrEfI0RtL9aoEQf3k0ZozQa6OallqMIzkymOezq2xY8ipPZktDrsCdI7HUm2o7ekaxGdJwQzZJUdvmSr39MqSq3CUDG+LK1QzlRTdhttlwdMz29Yb3VBKFIDGPD3Da9ae7mQzS/JI4aiZbZdZsrswOh7mqBumiJEubOy1esk2zUsJ6k/SjIH0OPGTgmRxmqbl7Q8bcUYKCMc6A824QDE9VKJ+rSYS2y4HCIvm6snhiRKuso0QlNJnIJqioxEPKDs8VcYLsovnoMLmA7kmJtYvCEn8dns/IaRgh0yXzxGkiBJW9riV9SRm44BQTFI/CKoGKbJI9Q5KwYHF5qQaUBeCSeqvGpafACjOClDMLFmlobhIiiKLiXUgHOXHAZkcLBiHWRoX1LdAB1xZPi3iNPMptQ5J/4DENxHkGtrGX19f34mFm2wFnr4hFFPY9U25D6QRV07Rho+tvjKrpQwj3+xgKrtEewpaCZmc0j4QTeVMWD0F/RbylIFo/A1K2qACIzE7mKa58LvHkUcydq6fgKhFW8IIM0Qz4vU42gq5lyOIEa4wzS4cg5OE7fOq7XMvMCg12gDjehcCgZfve95sKyEHkGHBDBOuw8ALvLDcr6cg7+kZWNoIXggAONtgKxp6oNDAGMxsCT1h0/uqlVa70DAqCmsXBkHJqWLUCHcrnq+IVXCurly1blQ5Ogcrru8jrbZUCR7814Fwp/F9aW2YpRpDYhDx/0bOwYbz009bhsa5muDpQfDhESdNKFxyGoIbhVmC5exnRXgGgS+fBTD3vIZwWAbnUn5whqIFAdtCQcf2Az60tV2AbVjDECzhYpSRYKe9DdB2WXu6UbDcDvsxAqTwHhMO5gBpf08Kg/1gDuRpA6ZarBDsbLS3V7T9WMJtVikIlh/btxclaR/weGLy8g/tpZ+ikihOp/P5L8GrJPyaz6dTURxCU8TpXFUnTDUoFyYR7qvqfMoHUwACDaIocpzjKYJneAWKTkfHiZCmvvezRKQA4/hZyiEAQlZOnDJyAhrA3qdSL8Y5ff7VT2kpF35awSOy1IcoaareUNBSJuQgIXOu40dAvYvdnDm4OX3egD6dn4yQ7OeagyeBK3XazUE7JzyrPUELEESvguyPM5l0kKbI6RS26VYXSVQnDzhPdHQm6m2eoGNdZ9bzI1J0a0lRYezc61TPDzVRrweBOImOLymaiLegLkdHp5oeyOkEvaQ70Pz9Rc3Ff/Ufe38ALWg6T1nv0qoAAAAASUVORK5CYII="> </div> <div class="title"> <h2>МОИ ДОМЕНЫ</h2> <p>размещение/редактирование размещения/удаление</p> </div> </div>

      • Specify the format of the icons? symbol, .img, .ico, font_icon. - Dhunga

       .container { margin: 20px 0 0 50px; width: 500px; height: 100px; position: relative; } .container:hover .circle { width: 100%; border-radius: 50px 3px 3px 50px; } .container:hover .title { color: #fff; } .circle { position: absolute; width: 100px; height: 100px; border-radius: 50px; background-color: blue; transition: all .5s linear 0s; font: normal 4rem/1.6 sans-serif; color: hsla(0, 0%, 80%, 1); text-shadow: 0px 0px 1px hsla(0, 0%, 0%, .4); text-align: left; text-indent: 4%; } .title { margin-left: 130px; z-index: 1; position: absolute; } 
       <div class="container"> <div class="circle">&phone;</div> <div class="title"> <h2>МОИ ДОМЕНЫ</h2> <p>размещение/редактирование размещения/удаление</p> </div> </div>