Centrally divided layout with animation (ONLY CSS) - html

Question

IMPORTANT NOTE: only CSS/HTML, but not javascript (client does not allow it)
recently started the homepage of my site and wanted to make a centrally divided layout. Want to place the logo on the middle and one picture on top of it with a button to lead to the page, and one below it with the same function.
The animation should be a hover over the buttons (or defined area around it) as seen in the comp I did here:
GIF ANIMATION OF WHAT IS INTENDED
Similar to what is intended: https://jsfiddle.net/vja85zgL/
* {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 80%;
height: 200px;
margin: auto;
}
#wrapper:hover #left:not(:hover) {
width: 25%;
transition: width 1s linear;
}
#wrapper:hover #right:not(:hover) {
width: 25%;
transition: width 1s linear;
}
#left {
width: 50%;
height: 100%;
background-color: lightblue;
display: inline-block;
position: relative;
transition: width 1s linear;
}
#innerleft {
position: absolute;
top: 100px;
width: calc(100% - 4px);
text-align: center;
border: 2px solid black;
}
#right {
width: 50%;
height: 100%;
background-color: lightgrey;
display: inline-block;
position: relative;
transition: width 1s linear;
}
#innerright {
position: absolute;
top: 100px;
width: calc(100% - 4px);
text-align: center;
border: 2px solid black;
}
#right:hover {
width: 75%;
transition: width 1s linear;
}
#left:hover {
width: 75%;
transition: width 1s linear;
}
<div id="wrapper">
<div id="left">
<div id="innerleft">
TITLE 1
</div>
</div><div id="right">
<div id="innerright">
TITLE 2
</div>
</div>
</div>
As seen, if hovering over the button, the background image behind the button shows itself "fully" (no rescaling), the logo (showed as B) moves down to 25% and the button not hovered scales down in size and font size and the image behind it slides under it where the user cannot see it properly (the user cannot see it by scrolling down).
If hovered on the other button the animation goes to the other button and image background.
There should be a delay of 2 seconds before the layout comes back to the starting position
DETAILS:
NO JAVASCRIPT ALLOWED, client doesn't allow usage
Should be responsive, so no hovering on touch devices
The image must not resize or loose proportion
Full screen layout
Mouse simulates user.
Animation should return to initial position after 3 seconds if mouse is not hovering
Initial position is 50%-50% (almost, due to the logo which is 150x150px)
End position should be 75%-25%.
Have been loosing my mind the last 2 days wondering how to do it as I am a beginner at CSS but didn't find a way yet.
Any help would be appreciated!
Available code of what has been done already to the design (total mess...):
#business-top {
height:50%
width:100%
}
#business-button {
height:3em;
width:12em;
background-color:#2B2A2A;
border: .2em solid #ff7600;
border-radius:1.8em;
margin:auto;
margin-top:3em;
}
#logo-separator {
text-align:center;
}
.separator {
display: block;
position: relative;
padding: 0;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #ff7600;
border-bottom: 1px solid #ff7600;
}
#logo {
margin:auto;
max-width:150px;
display:inline-block;
overflow:hidden
margin-top:-75px
}
#photography-bottom {
height:50%
width:100%
}
#photography-button {
height:3em;
width:12em;
background-color:#2B2A2A;
border: .2em solid #ff7600;
border-radius:1.8em;
margin:auto;
margin-top:3em;
}
h1 {
color:#ff7600;
text-align:center;
font-size:1.4em;
vertical-align:middle;
line-height:2.2em
}
<div id="business-top"
<a href="www.lluisballbe.smugmug.com">
<div id="business-button">
<h1>BUSINESS</h1>
</div>
</a>
</div>
<div id="logo-separator">
<div class="separator"></div>
<div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"</div>
</div>
<div id="photography-bottom"
<a href="www.lluisballbe.smugmug.com">
<div id="photography-button">
<h1>PHOTOGRAPHY</h1>
</div>
</a>
</div>

Answer 1

If you increase area of buttons once hovered , then you may have some results in CSS only:
trick comes from pointer-events and pseudo to increase hoverable area
/* tricky part */
div {
width: 100%;
pointer-events: none;
overflow: hidden;
transition: 1.5s;
}
div:hover {/* will be catch by child with pointer-events auto */
flex: 3;
}
div:first-child {
background: turquoise;
}
div a {
pointer-events: auto;/* if a is hovered, so is its parent */
position: relative;/* this could be for the div parent if you want to cover its area */
padding: 5px;
border-radius: 0.25em;
border: 3px solid;
box-shadow: 2px 2px 5px;
color: #222;
background: #aaa;
}
div a:hover:before {/* increase size of button only once hovered */
content: '';
position: absolute;
top: -200px;/* coordonates used to increase pseudo size from its relative position parent. tune to your needs */
bottom: -200px;
width: 100%;
}
/* layout */
body,
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
div {
flex: 1;
}
hr {
width: 100%;
height: 5px;
background: red;
text-align: center;
}
hr:before {
content: url(http://dummyimage.com/50x50);
display: inline-block;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin-top: -25px;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
<div>
button style
</div>
<hr/>
<div>
button style
</div>
From your update snippet :
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
h1 {
margin: 0;
}
a {
display: inline-block;
}
#business-top {
display: flex;
flex: 1;
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
}
#business-button {
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
}
#logo-separator {
text-align: center;
}
.separator {
display: block;
position: relative;
padding: 0;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
flex: 0;
border-top: 1px solid #ff7600;
border-bottom: 1px solid #ff7600;
}
#logo {
margin: auto;
max-width: 150px;
display: inline-block;
overflow: hidden;
margin: -75px;
position: absolute;
}
#photography-bottom {
display: flex;
flex: 1;
width: 100%;
align-items: center;
justify-content: center;
}
#photography-button {
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
}
h1 {
color: #ff7600;
text-align: center;
font-size: 1.4em;
vertical-align: middle;
line-height: 2.2em
}
#business-top,
#photography-bottom {
pointer-events: none;
position: relative;
z-index: 1;
transition: 1s;
/* min-height: 200px; you ma want this to avoid logo and button to overlap */
}
#business-top a,
#photography-bottom a {
pointer-events: auto;
}
#business-top:hover,
#photography-bottom:hover {
flex: 3;
}
#business-top a:hover:before,
#photography-bottom a:hover:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div id="business-top">
<a href="www.lluisballbe.smugmug.com">
<div id="business-button">
<h1>BUSINESS</h1>
</div>
</a>
</div>
<div id="logo-separator">
<div class="separator"></div>
<div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"> </div>
</div>
<div id="photography-bottom">
<a href="www.lluisballbe.smugmug.com">
<div id="photography-button">
<h1>PHOTOGRAPHY</h1>
</div>
</a>
</div>
http://codepen.io/anon/pen/qbvgga