Ad

Click A Circle And Make It The Size Of The Section/div

- 1 answer

Hi there I was wondering if it was possible so that when you click on a circle that it expands to fill the section/div that it is in?

I want that so when you click the circle it fills the screen and then some text appears in its place.

Before I posted this I took one more look on the web and found this jsfiddle

<div class="container">

    <div class="ObjectContainer">
        <div id="red" class="Object"></div>
        <a target="_blank" rel="nofollow noreferrer" href="#" >A link </a>
    </div>

    <div class="ObjectContainer">
        <div id="brown" class="Object"></div>
        <a target="_blank" rel="nofollow noreferrer" href="#" >A link </a>
    </div>

    <div class="ObjectContainer">
        <div id="dGrey" class="Object"></div>
        <a target="_blank" rel="nofollow noreferrer" href="#" >A link </a>
    </div>

    <div class="ObjectContainer">
        <div id="Grey" class="Object"></div>
        <a target="_blank" rel="nofollow noreferrer" href="#" >A link </a>
    </div>

</div>

body {
            text-align:center;
            font-family:helvetica;
            font-size: 16px;
            background: #f0f0f0;
            padding-top: 50px;
        }
            a {
                color: #f0f0f0;
                text-decoration: none;
            }
        .container {
            display: inline-block;
            margin: 0 auto;
            width: 400px;
        }
        /* ANIMATIONS */
        .Object, .ObjectContainer a {
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -ms-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
        }
        .ObjectContainer {
            width: 200px;
            height: 200px;
            float: left;
            display: block;
            position: relative;
            overflow:hidden;
        }
            .ObjectContainer .Object {
                display: block;
                width: 100%;
                height: 100%;
            }
            .ObjectContainer a {
                position: absolute;
                bottom: -200px;
                left: 0;
                opacity: 0;
                width: 100%;
                line-height: 0px;
                text-align: center;
                vertical-align: middle;
            }

        .ObjectContainer:hover .Object {
            margin: 2.5%;
            height: 95%;
            width: 95%;
            border-radius: 100px;
            /* -webkit-transform: rotate(100deg);
            -moz-transform: rotate(100deg);
            -ms-transform: rotate(100deg);
            -o-transform: rotate(100deg);
            transform: rotate(100deg); */
        }
            .ObjectContainer:hover a {
                opacity: 1;
                bottom: 0;
                line-height: 200px;
            }
        #red.Object {
            background: #e7222f;
        }
        #brown.Object {
            background: #796959;
        }
        #dGrey.Object {
            background: #363635;
        }
        #Grey.Object {
            background: #6f6f6e;
        }

It is what I am looking for but the opposite way round.

Edit

I have more and less got it now by messing about with what yous have given me. Here is the link to the jsfiddle

All I have done was sawp about the code. I didn't even think of this at the start. I still need to work on the text layout (needs more spaced out) and might try to do it with a click base event.

   #red.Object {
    background: #e7222f;
    margin: 2.5%;
    height: 95%;
    width: 95%;
    border-radius: 100px;
}
  #red.Object:hover {
    background: #e7222f;
         margin: 2.5%;
    height: 95%;
    width: 95%;
    border-radius:0;
}
Ad

Answer

I changed the top two circles and is this the desired starting results you were looking for?

body {
        text-align:center;
        font-family:helvetica;
        font-size: 16px;
        background: #f0f0f0;
        padding-top: 50px;
    }
        a {
            color: #f0f0f0;
            text-decoration: none;
        }
    .container {
        display: inline-block;
        margin: 0 auto;
        width: 400px;
    }
    /* ANIMATIONS */
    .Object, .ObjectContainer a {
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        -ms-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
    }
    .ObjectContainer {
        width: 200px;
        height: 200px;
        float: left;
        display: block;
        position: relative;
        overflow:hidden;
    }
        .ObjectContainer .Object {
            display: block;
            width: 100%;
            height: 100%;
        }
        .ObjectContainer a {
            position: absolute;
            bottom: -200px;
            left: 0;
            opacity: 0;
            width: 100%;
            line-height: 0px;
            text-align: center;
            vertical-align: middle;
        }

    .ObjectContainer:hover .Object {
        margin: 2.5%;
        height: 95%;
        width: 95%;
        border-radius: 100px;
        /* -webkit-transform: rotate(100deg);
        -moz-transform: rotate(100deg);
        -ms-transform: rotate(100deg);
        -o-transform: rotate(100deg);
        transform: rotate(100deg); */
    }
        .ObjectContainer:hover a {
            opacity: 1;
            bottom: 0;
            line-height: 200px;
        }
    #red.Object {
        background: #e7222f;
        margin: 2.5%;
        height: 95%;
        width: 95%;
        border-radius: 100px;
    }
    #brown.Object {
        background: #796959;
        margin: 2.5%;
        height: 95%;
        width: 95%;
        border-radius: 100px;
    }
    #dGrey.Object {
        background: #363635;
    }
    #Grey.Object {
        background: #6f6f6e;
    }
Ad
source: stackoverflow.com
Ad