Is it possible to make a circle expand and fill the section/div when clicked?
I want the circle to fill the screen upon clicking, and then have some text appear in its place.
Before posting this, I searched on the web and came across this jsfiddle link.
<div class="container">
<div class="ObjectContainer">
<div id="red" class="Object"></div>
<a href="#">A link</a>
</div>
<div class="ObjectContainer">
<div id="brown" class="Object"></div>
<a href="#">A link</a>
</div>
<div class="ObjectContainer">
<div id="dGrey" class="Object"></div>
<a href="#">A link</a>
</div>
<div class="ObjectContainer">
<div id="Grey" class="Object"></div>
<a 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;
}
.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;
}
This is what I'm looking for, but in reverse order.
Edit
After playing around with the code you provided, I think I've almost got it. Here's the updated jsfiddle link.
All I did was swap the code around. It didn't occur to me at first. I still need to work on the text layout (needs more spacing) and might try implementing a click-based 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;
}