Div's with relative Height to width to create scaling circle backgrounds

Question

I have Background that are Circular and i'm trying to get the sizes to be dynamic.

E.g for me to have the perfect circle I need the Width to be = to Height But I also need there to only be 3 items per row,

So I'm not sure if the way im thinking about it is the best solution to my issue but If I could get the Height to be = to the width that could work for me, Im aware of qeustion: CSS: Keeping a div's height relative to its width

Maintain the aspect ratio of a div with CSS

these Do not work in my use case.

Will post a image for visual Assistance(This image is from the Design not the website)

    <div class="why-middle">
        <h4 class="railway-regular">Every Business has a story they want to tell about their brand. We at Lion Marketing
            Understand the uniqueness of every business and therefore works efficiently to create
            your Brands stories that align with our core values as a company.</h4>
        <div class="row tooltips">

                <div class="col-md-3 con-tooltip bottom">

                    <img class="" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Why-img-1.png">
                    <div class="tooltip ">
                        <h1 class="tooltiptext">RESEARCH</h1>
                        <span class="tooltiptext">Before starting any task, we begin with research into to current trends, our clients brand’s and</span>
                    </div>
                </div>
            <div class="col-md-1"></div>
                <div class="col-md-3 con-tooltip bottom">
                    <img class="" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Why-img-1.png">
                    <div class="tooltip ">
                        <h1 class="tooltiptext">RESEARCH</h1>
                        <span class="tooltiptext">Before starting any task, we begin with research into to current trends, our clients brand’s and</span>
                    </div>
                </div>

            <div class="col-md-1"></div>
                <div class="col-md-3 tooltip">Hover over me
                    <span class="tooltiptext">Tooltip text</span>
                </div>

        </div>
    </div>

.tooltips{
    display: flex;
    justify-content: center;
}

.con-tooltip {
    width: 250px;
    height: 250px;
    margin: 50px;
    display: flex;
    border-radius: 50%;

    justify-content: center;

    position: relative;
    background: #F2D1C9;
    padding: 0 20px;

    transition: all 0.3s ease-in-out;
    cursor: default;

}

.con-tooltip img{
    width: 109px;
    height: 109px;
    margin: auto;
}

/*tooltip */
.tooltip {



    visibility: hidden;
    z-index: 1;
    opacity: .40;

    width: 100%;
    padding: 0px 20px;

    background: #333;
    color: #E086D3;

    position: absolute;
    top:-140%;
    left: -25%;


    border-radius: 9px;
    font: 16px;

    transform: translateY(9px);
    transition: all 0.3s ease-in-out;

    box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}


/* tooltip  after*/
.tooltip::after {
    content: " ";
    width: 0;
    height: 0;

    border-style: solid;
    border-width: 12px 12.5px 0 12.5px;
    border-color: #333 transparent transparent transparent;

    position: absolute;
    left: 40%;

}

.con-tooltip:hover .tooltip{
    visibility: visible;
    transform: translateY(-10px);
    opacity: 1;
    transition: .3s linear;
    animation: odsoky 1s ease-in-out infinite  alternate;

}
@keyframes odsoky {
    0%{
        transform: translateY(6px);
    }

    100%{
        transform: translateY(1px);
    }

}

/*hover ToolTip*/
.left:hover {transform: translateX(-6px); }
.top:hover {transform: translateY(-6px);  }
.bottom:hover {transform: translateY(6px);}
.right:hover {transform: translateX(6px); }


.bottom .tooltip { top:115%; left:-20%; }

.bottom .tooltip::after{
    top:-17%;
    left:40%;
    transform: rotate(180deg);
}

@TemaniAfif Oh wow thats a neat trick with the background thank you! One to save in the Old volt thanks a million — Azurry, Apr 28 '20 at 11:52
So to be clear, are you basically trying to dynamically and uniformly resize your `.con-tooltip` elements with equal height and width? — chris, Apr 28 '20 at 12:06
Essentially yes but it was more keeping the shape of the background The circle that was the issue the other sizing's I can achieve threw some columns and media queries but the question Temani linked the background: radial-gradient works so far Im going to have to resize the divs for smaller devices is the only thing — Azurry, Apr 28 '20 at 12:13
I think I understand, but I could be wrong, so I'll just leave this as a comment in case it helps. Try setting height and width to the same `vw` value. Sample: `.con-tooltip { height: 30vw; width 30vw; }` . Dynamically resizes element to equal height and width base on percent of viewport width (100vw = 100% of viewport width). — chris, Apr 28 '20 at 12:24

score 0 · Answer 1 · answered Apr 28 '20 at 11:57

0

Refer to Temani's comment

This question: How to auto resize a circle in an ::after pseudo element?

background: radial-gradient(circle closest-side, white 98%, transparent 100%);

Very simple solution.

answered Apr 28 '20 at 11:57

Azurry

491
3
16

Div's with relative Height to width to create scaling circle backgrounds

1 Answers1