Responsive Transparent Overlapping CSS Circles with Text Align Vertical and Center

Responsive transparent overlapping css circles with text align vertical and center

add a wrapper div around your h1

    <div class="circle1 transparent_class">
<div class="wrapper"><h1>Two lines <br />&Two lines</h1>
</div>
</div>

and change the style like this:

.wrapper{
  margin-top:40%;
  height:100%;
  width:100%;
  display: table;
}

see here for a updated pen. http://codepen.io/anon/pen/yugBK

Fill in overlapping circle area

One way you can approach this is by adding a "inner-cursor" circle inside the main circle. Based on mouse movement it will move with the main cursor given the illusion of overlap.

In this case, the background color of the intersecting circles will not matter. Also, you do not have to worry about mix-blend-mode since the inner cursor has a background color and is hidden. It is only viewed if the mouse hovers over the main circle.

See this example:

$(document).mousemove(function(e) {
  // elements  let cursor = $('.cursor');  let innerCursor = $('.inner-cursor');  let c2 = $('.circle');
  let pos = {    left: e.pageX - 25,    top: e.pageY - 20  };  cursor.css(pos);
  innerCursor.css({    left: pos.left - c2.offset().left,    top:  pos.top - c2.offset().top  });
  // circles

  // radius  var d1 = cursor.outerWidth(true) / 2;  var d2 = c2.outerWidth(true) / 2;
  // centers of first circle  var x1 = cursor.offset().left + cursor.width() / 2;  var y1 = cursor.offset().top + cursor.height() / 2;
  // centers of second circle  var x2 = c2.offset().left + c2.width() / 2;  var y2 = c2.offset().top + c2.height() / 2;
  var i1 = c2.find('.inter1');  var i2 = c2.find('.inter2');  var o = cursor.find('.overlap');
  function calc() {    var a = d2;    var b = d1;    var c = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));    var d = (b * b + c * c - a * a) / (2 * c);    var h = Math.sqrt((b * b) - (d * d));    // console.log(a, b, c, d, h);    if (d < 0 || $.isNumeric(h)) {      c2.css('border-color', 'red');    } else {      c2.css('border-color', 'black');    }    var x3 = (x2 - x1) * d / c + (y2 - y1) * h / c + x1;    var y3 = (y2 - y1) * d / c - (x2 - x1) * h / c + y1;    var x4 = (x2 - x1) * d / c - (y2 - y1) * h / c + x1;    var y4 = (y2 - y1) * d / c + (x2 - x1) * h / c + y1;
    if ($.isNumeric(h)) {      i1.show();      i2.show();    } else {      i1.hide();      i2.hide();    }    i1.offset({      top: y3 - 5,      left: x3 - 5    });    i2.offset({      top: y4 - 5,      left: x4 - 5    });  }  calc();
});

body {  background: #fff;}
.clip {  display: inline-block;  background: blue;  height: 50px;  width: 50px;  border-radius: 50%;  clip-path: ellipse(50px 50px at 50% 0%);  position: absolute;  left: 750px;  top: 40px;}
.cursor {  left: 750px;  top: 40px;}
.cursor {  height: 50px;  width: 50px;  border-radius: 50%;  position: absolute;  pointer-events: none;  z-index: 999;  border: 1px solid black;  outline: 1px solid #c9d3ff;  overflow: none;  mix-blend-mode: multiply;  background: rgba(100, 100, 100, 0.1);}
.circle {  background: rgba(100, 100, 100, 0.1);  border-radius: 50%;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 200px;  height: 200px;  border: 1px solid black;  outline: 1px solid #c9d3ff;  overflow: hidden;}
.circle::after,.cursor::after {  display: block;  content: '';  height: 1px;  background: #c9d3ff;  position: absolute;  top: 50%;  left: 0;  right: 0;}
.circle::before,.cursor::before {  display: block;  content: '';  width: 1px;  background: #c9d3ff;  position: absolute;  left: 50%;  top: 0;  bottom: 0;}
.inter {  width: 10px;  height: 10px;  background: black;  border-radius: 50%;  position: absolute;  display: none;}
.inner-cursor {  height: 50px;  width: 50px;  border-radius: 50%;  position: absolute;  pointer-events: none;  background: green;  left: 50%;  top: 50%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="cursor">
</div><span class="clip"></span>
<div class="circle">  <div class='inner-cursor'></div>  <div class="inter1 inter"></div>  <div class="inter2 inter"></div></div>

How overlap an image over a circle?

Sorry I cleaned it up a bit before working on it but I think positioning is the way to go.

.container {  display: grid;  grid-template-columns: 100px 100px 100px;  grid-template-rows: 150px 150px;  background-color: gray;}
.sprite {  background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);  background-repeat: no-repeat;  display: block;  position: absolute;  bottom: 0;  left: 5px;  z-index: 2;  }
.bg-Ant_Man {  width:80px;  height: 111px;  background-position: 0px -555px;}
.single-hero {  width: 80px;  height: 80px;  background-color: black;  overflow: visible;  border-radius: 50%;  position: relative;  margin-top: 50px;}
.single-hero:after {  content: "";  display: block;  position: absolute;  top: 50%;  left: 50%;  width: 100px;  height: 100px;  transform: translate(-50%, -50%);  border-radius: 50%;  z-index: 1;  opacity: 0;  background-image: url("https://cdn1.iconfinder.com/data/icons/art-design-and-development-vol-2/64/092-512.png");  background-position: center center;  background-size: cover;   animation: rotate 1s infinite linear;   transition: opacity .2s ease-in-out;}
.single-hero:hover:after {  opacity: 1;}
@keyframes rotate {  0% {    transform: translate(-50%, -50%) rotate(0deg);  }  100% {    transform: translate(-50%, -50%) rotate(360deg);  }}

<div class="container">  <div>    <div class="single-hero">      <div class="hero-figure bg-Ant_Man"></div>      <i class="sprite bg-Ant_Man"></i>      <b>Ant-Man</b>  </div>  </div>

Center text horizontally and vertically in a circle

Approach 1: `line-height` equal `height` tricks

(works for single line of text).

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  font-size: 30px;
  background: #9cc;
  line-height: 150px;
  text-align: center;
}

<div class="circle">Hello</div>

How to center two overlapping circles within a div in CSS?

I am not sure if that is exactly how you wanted to center the circles so I centered both circles within a div in a row with one overlapping the other one slightly. You can have a look here how it might look like.

You can see that I used Flexbox to achieve that result. I wrapped both circles in a div on which I used display: flex. On top of that, I centered the text of each circle within the div, using display: flex and related flexbox properties once again.

Obviously you could now play with the size of each circle depending on your preference.

Hope it helps.

Text in circle do responsive

Use the following padding-technique to make responsive circles:

.circle {    position:relative;    display:inline-block;    margin-right: 10px;}.circle span {    padding:60% 10%;    margin-top:-0.6em;    display:flex;}.circle span:after {    content:'';    position:absolute;    top:0; left:0;    width:120%;    padding-bottom:120%;    background-color:#eee;    border-radius:50%;    z-index:-1; }

<div class="circle"><span>0</span></div><div class="circle"><span>100</span></div><div class="circle"><span>10000</span></div><div class="circle"><span>1000000000000</span></div>

Overlapping div and text on center

You could simply achieve that by using :after pseudo-element and CSS transform property like this:

.div {    position: relative;    height: 100px;    width: 100px;    overflow: hidden;    background-color: red;    border: 5px solid #000;    color: #fff;    text-align: center;    line-height: 100px;    z-index: -2;}.div:before {    content:'';    position: absolute;    left: 20%;    width: 100%;    height: 200%;    background-color: green;    top: 0;    border-left: 5px solid #000;    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    transform: rotate(45deg);    z-index: -1;}

<div class="div">    <a>1</a></div>

Bootstrap-4 card responsive image / text columns overlapping

If I understand correctly, you want to center your left box, don't want to overlap content with image and keep your box height the same as the right side.

I removed .container, .row and .h-100 classes from your code and also removed some unwanted div from your code for getting a suitable result.

HERE IS YOUR CODE

https://jsfiddle.net/w5pzcxn6/

how to connect circles with lines without overlapping

I came up with this solution using simple markup and CSS. The Codepen includes animation examples, in case this is a progress kind of thing.

Codepen: http://codepen.io/jpecor-pmi/pen/GZNPWO

HTML

<section id="circles">
    <div data-num="1"></div>
    <div data-num="2"></div>
    <div data-num="3"></div>
    <div data-num="4"></div>
    <div data-num="5"></div>
    <div data-num="6"></div>
    <div data-num="7"></div>
</section>

CSS

/*
  @circle-diameter: 50px;
  @circle-count: 7;
  @border-width: 6px;
  @border-color: #ffefbd;
*/

/* circle containers */

#circles > div {
    background: transparent;
    font-weight: bold;
    float: left;
    height: 50px; /* @circle-diameter */
    position: relative;
    width: calc((100% - 50px) / 6 - .1px); /* (100% - @circle-diameter) / (@circle-count - 1) - 0.1px for IE :( */
}

/* circle */

#circles > div::before {
    border: 6px solid #ffefbd; /* @border-thickness solid @border-color */
    border-radius: 25px; /* @circle-diameter / 2 */
    color: #ffefbd;
    content: attr(data-num); /* value from data-num attribute */
    display: block;
    float: left;
    font: 21px sans-serif;
    height: 50px; /* @circle-diameter */
    line-height: 38px;
    text-align: center;
    width: 50px; /* @circle-diameter */
}

/* line */

#circles > div::after {
    background: #ffefbd; /* @border-color */
    content: '';
    display: block;
    height: 6px; /* @border-thickness */
    position: absolute;
    right: -1px; /* removes gap between circle and line */
    top: calc(50% - 3px); /* 50% - (@border-thickness / 2) */
    width: calc(100% - 48px); /* 100% - (@circle-diameter - 2px) */
}

/* first circle */

#circles > div:first-child {
    width: 50px; /* @circle-diameter */
}

#circles > div:first-child::after {
    display: none; /* hide line for first circle */
}

/* reset */

#circles,
#circles > div,
#circles > div::before,
#circles > div::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Responsive Transparent Overlapping CSS Circles with Text Align Vertical and Center