Currently, I am experimenting with three divs shaped like bubbles. Right now, my focus is on the first bubble element. When clicked, these bubbles are expected to expand and take up most of the screen space, then return to their original size when the title is clicked again. To better understand this concept, it would be beneficial if you could run the code:
<!DOCTYPE html>
<html>
<head>
<title>KURB - Home</title>
<link rel="stylesheet" type="text/css" href="kurb.css"/>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="main">
<p id="k">KURB</p>
</div>
<div id="about">
<p class="label">Blah blah blah</p>
</div>
<div id="work">
<p class="label">Blah blah blah</p>
</div>
<div id="contact">
<p class="label">Blah blah blah</p>
</div>
<script type="text/javascript">
// JavaScript logic here
</script>
</body>
</html>
CSS:
body {
overflow: hidden;
}
/* CSS styles here */
In my current implementation, everything seems to work as intended initially. However, I'm encountering an issue where the CSS transitions, specifically for opacity and margin adjustments, do not take effect after the div has been expanded. It appears that the jQuery animations might be interfering with these CSS transitions. Could it be possible that once a div expands, the CSS transitions remain inactive? Any advice or insights into this problem would be greatly appreciated.