body, html, h1, p { margin: 0; padding: 0; } main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .circlewrap { margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 90%; height: 100px; } .circlewrap .text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40%; text-align: right; } .circlewrap .text h1 { color: red; font-size: 1.5em; padding: 6px; } .circlewrap .text p { font-size: 1em; padding: 6px; } .circlewrap .h-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; width: 60%; border: 1px solid red; border-radius: 46px/50px; border-top-left-radius: hidden; } .circlewrap .h-wrap .circle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: -1px; } .circlewrap .h-wrap .circle .c-cont { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100px; height: 100px; border: 1px solid #c2c2c2; border-radius: 50px; } .circlewrap .h-wrap .circle .c-cont img { width: 60px; height: 60px; } .circlewrap .h-wrap .hidden { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 
 <body> <main> <div class="circlewrap"> <div class="text"> <h1>Анализ конкурентной среды</h1> <p>Проводится детальный анализ ТОПА по продвигаемым запросам и сайтам конкурентов</p> </div> <div class="h-wrap"> <div class="circle"> <div class="c-cont"><img src="img/x1.png"></div> </div> <div class="hidden"> <p>текс текс текст</p> </div> </div> </div> </main> </body>

There is a circle with a gray border. I want a block to appear when you hover on it to the right. But I can not understand how to impose the border of one block to another. Constantly different.

    1 answer 1

    I got here so

     body, html, h1, p { margin: 0; padding: 0; } main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .circlewrap { margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 90%; height: 99px; } .circlewrap .text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40%; text-align: right; } .circlewrap .text h1 { color: red; font-size: 1.5em; padding: 6px; } .circlewrap .text p { font-size: 1em; padding: 6px; } .circlewrap .h-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; width: 60%; border: 1px solid red; border-radius: 50px/50px; border-left: none; height:100px; } .circlewrap .h-wrap .circle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 0px; } .circlewrap .h-wrap .circle .c-cont { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100px; height: 100px; border: 1px solid #c2c2c2; border-radius: 50px; } .circlewrap .h-wrap .circle .c-cont img { width: 60px; height: 60px; } .circlewrap .h-wrap .hidden { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 
     <body> <main> <div class="circlewrap"> <div class="text"> <h1>Анализ конкурентной среды</h1> <p>Проводится детальный анализ ТОПА по продвигаемым запросам и сайтам конкурентов</p> </div> <div class="h-wrap"> <div class="circle"> <div class="c-cont"><img src="img/x1.png"></div> </div> <div class="hidden"> <p>текс текс текст</p> </div> </div> </div> </main> </body>

    corrected

    • maybe it’s in the browser, but I clearly see a 1-2 pixel mismatch of borders - Paul Wall
    • corrected added height for .h-wrap and border-left: none; - klifort