Centering a div on a page with an overlay - javascript

I've recently begun to learn HTML, CSS, JavaScript, and jQuery from this set of books.
I've tried every obvious answer I could dig up on Stack Overflow to do what is normally the very simple task of centering a div on a page. My particular page has an overlay, which I suspect is part of my problem. I'm working to adapt a CodePen to my project. In this CodePen, only one element, an H1 tag, needs to be centered on a page and it works fine.
On my page, I'm replacing a h1 tag with a div. I've included a link to jsFiddle with comments re: what I've tried to do. I know I'm missing something really simple, but I'm unable to figure out what it is.
Thank you for reading and I welcome your suggestions for this front-end noob.
Below is my problematic code:
<!DOCTYPE html>
<body>
<header>
<div class="hero" id="Portfolio">
<div class="overlay"></div>
<div class="page-subject">
<!-- Rather than a vanilla h1 tag following the div.overlay, I wrapped the h1 tag in a div called div.page-subject. I can't get this div to center -->
<h1>Portfolio</h1>
<div class="container space-around">
<div><img src="../images/icons/apple-app-store-128.png" alt="iOS Applications"></div>
<div><img src="../images/icons/amazon-echo-128.png" alt="Amazon Alexa Skills"></div>
</div>
</div>
</div>
</header>
html, body {
height:100%;
padding:0;
margin:0;
font-family: Raleway,sans-serif;
color:#FFF;
}
header {
height: calc(100% - 65px);
background:#333;
-webkit-perspective: 1500px;
perspective: 1500px;
perspective-origin: center bottom;
}
h1 {
margin:0;
vertical-align: middle;
text-align:center;
font-size:80px;
font-weight:600;
text-transform:none;
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
.hero#Portfolio {
position:relative;
background:#333 url(https://wallpaperscraft.com/image/surface_gray_dark_light_shadow_18440_2560x1600.jpg) no-repeat center center;
background-size:cover;
height: 100%;
width:100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display:table;
}
.hero .overlay {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
opacity:0;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
div.page-subject {
vertical-align: middle;
}
.container {
display: flex;
}
.container.space-around {
z-index: 10;
justify-content: space-around;
padding-bottom: 10px;
}
a {
position: relative;
z-index: 1;
}
a.hvr-pop img {
background: white;
border-radius: 25px;
display: block;
min-width: 64px;
max-width:128px;
min-height: 64px;
max-height:128px;
width: auto;
height: auto;
}
/* Pop */
#-webkit-keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
/*Does button animation from hover.css class*/
.hvr-pop {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
-webkit-animation-name: hvr-pop;
animation-name: hvr-pop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
'use strict';
// This creates to folding animation
$(window).scroll(function() {
var heroHeight = $('header').height();
var yPosition = $(document).scrollTop();
if (yPosition <= heroHeight) {
var effectFactor = yPosition / heroHeight;
var rotation = effectFactor * (Math.PI / 2 - Math.asin( (heroHeight - yPosition) / heroHeight ));
$('.hero').css({
'-webkit-transform': 'rotateX('+rotation+'rad)',
'transform': 'rotateX('+rotation+'rad)',
})
.find('.overlay').css('opacity', effectFactor);
}
/**
* Sticky nav-bar
*/
if (yPosition <= heroHeight) {
$('nav').removeClass('fixed');
} else {
$('nav').addClass('fixed');
}
});
$(document).ready( function () {
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$("nav ul a.current").removeClass("current");
$("nav ul a[href='" + pathname + "']").addClass("current");
});

Just add this:
div.page-subject {
vertical-align: middle;
display: table-cell;
}
Here is Fiddle.

How about this.
Use div.page-subject instead of the tag and use
div.page-subject {
vertical-align: middle;
display: inline-block;
width: 100%;
text-align: center;
font-size: 1.2rem;
margin: 1rem 0;
}

Centering things horizontally is easy.
display: block;
margin: auto;
position: relative, absolute, or fixed depending...
Centering thing vertically takes more work and I always do it this way.
top: 50%;
transform: translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;
However you can also do it all with transforms
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;
If using transforms don't forget to use vendor prefixes.
I use this auto prefixer: http://pleeease.io/play/

Try this
.hero{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

to center a div horizontally try to use this one
/* lets say its width is 500px */
.hero{
width:500px;
display:block;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
}
if you wanted to make it center both vertically and horizontally then you must have to set its position to absolute like this one,
.hero {
width:500px;
height:500px;
position:absolute;
left:50%; /* centers horizontally on the screen */
top:50%; /* centers vertically on the screen */
background-repeat:no-repeat;
background-position:center;
margin:-250px 0 0 -250px; /* is width and height divided by two */
background:#FFFFFF;
}
You have to set overlay element as a parent of a .hero element and overlay element should be like this one,
.overlay {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
z-index:9999; /* makes sure it stays on top */}

Related

How to replace text with an image/icon when scaling to mobile?

I am newbie to this and can't find many specific answers. I am looking for a way to change text labels into images when the viewport is scaled down to mobile sizes. I have additional issues because I am doing so with Leaflet, a java script library for Open Street Maps. They organize things a little different and I have to inject my styling.
Here is my live page with icons: https://leksplay.com/playgroundmap (still working on my SSL cert).
My full inline styles are at the bottom. I have a couple of things going on here.
I am styling the input directly because Leaflet inserts a div between label and input not allowing me to trigger animation on the label based on "checked" input states.
I am injecting a class into my labels through javascript. Leaflet allows this, example:
var overlayMaps = {
"All Playgrounds": dummy[0],
"<img class='icons' src='https://static.tildacdn.com/tild6162-6637-4663-b262-356661343562/IconsMedium_WC.png' alt='Restrooms'>": dummy[1],
"<img class='icons' src='https://static.tildacdn.com/tild6238-6432-4162-a161-333539326537/IconsMedium_Grill.png' alt='Public grills'>": dummy[2],
"<img class='icons' src='https://static.tildacdn.com/tild3939-3338-4237-b732-346131313435/IconsMedium_Access.png' alt='Accessible equipment'>": dummy[3],
"<img class='icons' src='https://static.tildacdn.com/tild3634-3833-4338-b834-626437613735/IconsMedium_Indoor.png' alt='Indoor area'>": dummy[4],
"<img class='icons' src='https://static.tildacdn.com/tild3331-3632-4239-a333-343137356133/IconsMedium_Full_Fen.png' alt='Fully fenced'>": dummy[5],
"<img class='icons' src='https://static.tildacdn.com/tild3339-3038-4032-a638-626137393039/IconsMedium_Partial_.png' alt='Partially fenced'>": dummy[6],
"<img class='icons' src='https://static.tildacdn.com/tild3336-3333-4137-a562-346663633031/IconsMedium_Horse.png' alt='Animals'>": dummy[7],
"<img class='icons' src='https://static.tildacdn.com/tild3332-6230-4731-a138-373630383130/IconsMedium_Water.png' alt='Pool or beach'>": dummy[8],
"<img class='icons' src='https://static.tildacdn.com/tild3761-3935-4338-b861-336231626433/IconsMedium_Toddler.png' alt='Toddler Area'>": dummy[9]
};
I am also having some issues with my flex container on smaller screens because of margins I can't manage to fix. On mobile there is too much space on the left and right side causing the container to only have two columns when clearly there is space for 3 or 4. Example:
photo of current mobile view
I am sure there is a way, maybe with jQuery (which I dont know), to either fix the flex container on mobile or simply transition from text only on desktop to icons when on a smaller screen. Here is a live example of the text only version: https://leksplay.com/test-and
My end goal is to find a way that can display my control box (filters) on mobile without the browser creating an overflow scroll box or making the user scroll needlessly far to get to the actual map.
Any help is appreciated.
<div class="flexcontainer">
<div id="new-parent">
</div>
</div>
<script>// Create the control and add it to the map;
var control = L.control.layers(null, overlayMaps,{collapsed:false});
control.addTo(map);
// Call the getContainer routine.
var htmlObject = control.getContainer();
// Get the desired parent node.
var a = document.getElementById('new-parent');
// Finally append that node to the new parent.
function setParent(el, newParent)
{
newParent.appendChild(el);
}
setParent(htmlObject, a);
</script>
<style>
*, *::before, *::after {
box-sizing: border-box;
vertical-align: middle;
}
body {
color: #435757;
background: radial-gradient(#fff, #dac4cd);
font: min(3vw, 16px) 'Montserrat';
justify-content: center;
align-items: center;
flex-direction: column;
}
label:first-of-type {
border: 3px solid #689c93;
margin: min(1vw,10px) 75%;
flex: 0 0 30%;
border-radius: 100px;
}
label {
display: block;
position: relative;
padding: min(.5vw, 5px) min(3vw, 15px) min(.5vw, 5px) min(.5vw, 5px);
color: #000;
background-color: transparent;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: background-color .2s, box-shadow .2s;
flex: 0 0 20%;
border-radius: 100px;
}
.flexcontainer {
display: flex !important;
flex-wrap: wrap;
}
.icons {
width: 70px;
}
#new-parent {
position: relative;
}
</style>
<style>
.leaflet-control-layers-selector {
--primary: #679C92;
--secondary: #E0E0E0;
--duration: 0.5s;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-mask-image: -webkit-radial-gradient(white, black);
outline: none;
cursor: pointer;
position: relative;
overflow: hidden;
transform-style: preserve-3d;
perspective: 240px;
border-radius: 50%;
width: min(3.5vw, 25px);
height: min(3.5vw, 25px);
background-size: 300% 300%;
transition: transform 0.3s;
transform: translate(0vw, 0vw);
transform-origin: center center;
animation: var(--name, unchecked) var(--duration) ease forwards;
}
.leaflet-control-layers-selector:before, .leaflet-control-layers-selector:after {
content: '';
position: absolute;
height: var(--height, 13px);
left: 3px;
top: var(--top, 3px);
background: var(--background, var(--primary));
animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;
}
.leaflet-control-layers-selector:before {
clip-path: polygon(0 0%);
}
.leaflet-control-layers-selector:active {
--scale: 0.95;
}
.leaflet-control-layers-selector:checked {
--name: checked;
--name-icon-b: checked-icon;
--name-icon-a: unchecked-icon;
}
#keyframes checked-icon {
from {
transform: translateZ(12px);
}
to {
transform: translateX(16px) rotateY(90deg) translateZ(12px);
}
}
#keyframes unchecked-icon {
from {
transform: translateX(-16px) rotateY(-90deg) translateZ(12px);
}
to {
transform: translateZ(12px);
}
}
#keyframes checked {
from {
background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
background-position: 100% 50%;
}
to {
background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
background-position: 50% 50%;
}
}
#keyframes unchecked {
from {
background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
background-position: 100% 50%;
}
to {
background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
background-position: 50% 50%;
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
</style>
<style>
.leaflet-control-layers-expanded {
padding: 0px 0px 0px 0px !important;
background: transparent !important;
}
.leaflet-control-layers {
box-shadow: 0 0px 0px rgba(0,0,0,00) !important;
background: transparent !important;
border-radius: 0px !important;
}
.leaflet-control-layers-overlays {
display: flex !important;
position:unset;
justify-content: center;
flex-wrap: wrap;
flex-basis: unset;
align-items: center;
width: 75%;
margin: 0px 12.5% 0px 12.5%;
align: center;
}
</style>
Here is the solution:
Step 1: hide the text when the browser size is less than 991px or in mobile screens which have size less than 991px;
Step 2: set a background image.
#media all and (max-width:991px){
#tst1{
background-image:url('https://static.tildacdn.com/tild6162-6637-4663-b262-356661343562/IconsMedium_WC.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst2{
background-image:url('https://static.tildacdn.com/tild6238-6432-4162-a161-333539326537/IconsMedium_Grill.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst3{
background-image:url('https://static.tildacdn.com/tild3939-3338-4237-b732-346131313435/IconsMedium_Access.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst4{
background-image:url('https://static.tildacdn.com/tild3634-3833-4338-b834-626437613735/IconsMedium_Indoor.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst5{
background-image:url('https://static.tildacdn.com/tild3331-3632-4239-a333-343137356133/IconsMedium_Full_Fen.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst6{
background-image:url('https://static.tildacdn.com/tild3339-3038-4032-a638-626137393039/IconsMedium_Partial_.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst7{
background-image:url('https://static.tildacdn.com/tild3336-3333-4137-a562-346663633031/IconsMedium_Horse.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst8{
background-image:url('https://static.tildacdn.com/tild3332-6230-4731-a138-373630383130/IconsMedium_Water.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst9{
background-image:url('https://static.tildacdn.com/tild3761-3935-4338-b861-336231626433/IconsMedium_Toddler.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
}
<span id="tst1">Restrooms</span>
<span id="tst2">Public grills</span>
<span id="tst3">Accessible equipment</span>
<span id="tst4">Indoor area</span>
<span id="tst5">Fully fenced</span>
<span id="tst6">Partially fenced</span>
<span id="tst7">Animals</span>
<span id="tst8">Pool or beach</span>
<span id="tst9">Toddler Area</span>
I have done little modification to your code to make things working.Please run it full screen and reduce the browser's size to see the changes.
Also, replace the areas of your code with this code and apply css.I have taken 991px as breakpoint, but you can take breakpoint of your choice.

jQuery set `background-size` does not work

I got the following problem:
On click I am trying to animate the position, width and height of an absolute positioned div. Additionally I am trying to change the background-size through jQuery.
What happens is that it changes all the CSS properties correctly, but not background-size.
It's supposed to change background-size:100% auto to background-size:auto 100%. It just seems to ignore that.
Does anyone know why this problem occurs?
$(".item").click(function(){
$(this).animate({
'width': '94vw',
'height': '94vh',
'top': '3vh',
'left': '3vw',
'background-size': 'auto 100%'
}, 500);
$(".again").fadeIn();
});
$('.again').click(function() {
location.reload();
});
*{
margin:0;
padding:0;
}
.item{
background:#a0a0a0;
width:50%;
height:100px;
position: absolute;
top:0;
left:0;
cursor:pointer;
overflow:hidden;
background-image:url("http://www.stefan-hefele.de/tl_files/Portfolio/Landschaft/Mallorca/Hochformate/9542_Mallorca%20Dawn.jpg");
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
}
.again{
display:none;
position:absolute;
bottom:20px;
width:100px;
left:calc(50% - 50px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>
<button class="again">Again</button>
Why not use CSS transitions combined with a class instead of jQuery animate() ?
Here I use the class .big to toggle your CSS rules. I also added transition: all .5s; on your .item to enable transitions.
$(".item").click(function() {
$(this).toggleClass('big');
});
* {
margin: 0;
padding: 0;
}
.item {
background: #a0a0a0;
width: 50%;
height: 100px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
overflow: hidden;
background-image: url("http://www.stefan-hefele.de/tl_files/Portfolio/Landschaft/Mallorca/Hochformate/9542_Mallorca%20Dawn.jpg");
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
transition: all .5s;
}
.item.big {
width: 94vw;
height: 94vh;
top: 3vh;
left: 3vw;
background-size: auto 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>

HOW TO add/give full height to parallels columns divs with bootstrap?

I have a problem adding 2 divs in parallel and giving them a full height.
i already have the divs in parallel, but the problem is when i want to give them the full height:100%; it happens nothing.
Which properties do i have to change to make possible this??
The idea is to have a cover page, without x-scrollbar and y-scrollbar, only a cover photo, divided
this is my code:
https://jsfiddle.net/davidlerma87/3u8v01b4/2/
Well
First: As you can see, i have a menu bar on top that actually is not working well.
Second: I want below 2 parallels columns with full height
Third: this is for mobile too.
The problem is the position of the divs that are misaligned
regards and thanks!!
Again quick explanation,
screen divided in two columns but with full height including the top menu
Please check this fiddle, I have made necessary changes in css
html,body { height:100%; }
body {
background: url("img/GProxpt.jpg") no-repeat center center fixed;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding:0;
margin:0;
color:#f1f3f5;
font-family: "Courier New";
font-size:14px;
}
.container-fluid {
background-color: rgba(0, 0, 0, 0.6);
/* position: absolute; */
/* top: 0; */
/* left: 0; */
/* width: 100%; */
height: 100%;
/* overflow: auto; */
}
.icon-menu {
margin-top:20px;
margin-right:7em;
float:right;
cursor:pointer;
width:30px;
height:40px;
}
.icon-menu:hover {
width:35px;
height:45px;
}
.row-menu { background:red; min-height: 100%;}
.left-side {
width:100%;
height:100%;
padding-left:20px;
margin-top:7em;
}
.left-side .title {
color:#DCEA5F;
font-size:50px;
}
.left-side .title .sub-title {
font-size:35px;
}
.left-side .text-par {
padding-top:20px;
padding-right:0;
font-size:20px;
}
.cols {
/* position: absolute; */
display: block;
min-height: 100vh;
margin-top: 20px;
float: left;
}
.outer-right-side {
position:relative;
background:#18232E;
margin-right:0;
margin-top:0;
}
.outer-left-side {
margin-bottom:0;
position:relative;
background:white;
}
https://jsfiddle.net/3u8v01b4/5/
Updated fiddle : https://jsfiddle.net/51wwmvqx/
Removed the scrolls and made HTML structure changes.
You can try this:
.cols {
height: 100vh;
}

Add CSS Transition between image switch

In my site I have a switch between a down arrow & and an up arrow. See here
How do I change this to a CSS transition, so there's a brief break between the switch?
Here's my code:
function close_accordion_section(source) {
$(source).parent().find('.accordion-section-title').removeClass('active');
$(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function (e) {
if ($(e.target).is('.active')) {
close_accordion_section(e.target);
} else {
$(this).addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
e.preventDefault();
});
.accordion {
overflow: hidden;
margin-bottom: 40px;
}
.accordion-section {
padding: 15px;
border: 1px solid #d8d8d8;
background: #fbfbfb;
}
.accordion-section-title {
width: 100%;
display: inline-block;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: top right;
}
.accordion-section-title.active {
background: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png") top right no-repeat;
background-size: 5% 100%;
background-repeat: no-repeat;
}
.accordion-section-title.active, .accordion-section-title:hover {
text-decoration: none;
transition: color 0.1s linear;
}
.accordion-section-content {
padding: 15px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a>
<div id="accordion-1" class="accordion-section-content">
<p>Text.</p>
<p>
</div>
</div>
</div>
You can do this in 2 ways that I can think of. One is by jQuery-UI and add a
.delay(2000)
to the end of your transition. The other way is in your css class for your transition is do a
transition-delay: 2s;
For the arrow, it would be better to transition and rotate the image.
.rotate{
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
Here is a neat website to help you with that: http://www.css3maker.com/css3-transition.html

How to create a row of three expandable/collapsible divs which react on hover?

What I am trying to achieve is a container with three inline divs that expand on the whole container when the mouse is hovered on them. One of the divs is floated to the right, one to the left, and one is centred. Here is a jsfiddle page so you can understand better what I am trying.
https://jsfiddle.net/hn59ooL5/
<div id="container">
<div id="container-left">
<div id="info-img-container" onmouseover="hoverOverLeft();" onmouseout="unHoverLeft();">
<img id="info-img" src="images/info.png" alt="info" name="info"/>
</div>
<div id="info-text-container">
Hover your mouse over this card to find info on how to use this website
</div>
</div>
<div id="container-right">
container right
</div>
<div id="container-center">
</div>
</div>
and the css:
#container{
margin: auto;
width: 85%;
height:55%;
display: block;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#container-left{
position: absolute;
background-color:#F8F8FF;
width: 33%;
height:100%;
display: inline-block;
float: left;
z-index:2;
transition: all 2s ease-in-out;
}
#container-left:hover{
width:100%;
z-index:999;
transition: all 2s ease-in-out;
}
#container-right{
position:absolute;
background-color:#6050DC;
width: 33%;
height:100%;
display: inline-block;
float: right;
z-index: 4;
right:0;
transition: all 2s ease-in-out;
}
#container-right:hover{
width:100%;
z-index:201;
transition: all 2s ease-in-out;
}
#container-center{
width: 33%;
height:100%;
display: inline-block;
position: absolute;
left: 33.5%;
z-index: 3;
background:url("../images/cloud.jpg") no-repeat;/*sets background pattern*/
background-size: cover;
}
#info-img-container{
float:left;
display: inline-block;
margin-left:0;
width:28%;
height:100%;
vertical-align: middle;
}
#info-text-container{
float: right;
display: inline-block;
font-size: 50px;
position:relative;
margin-right:0;
width:65%;
}
#info-img{
height: 100%;
width: 220px;
vertical-align: middle;
}
I am getting the two side divs to expand, the left one is expanding to the right and the right one to the left, but I do not know how to make the center one expand on both sides. Any ideas how can I do this with HTML/CSS/JavaScript?
Add the following css and you should get a fullscreen hover on the center div.
#container-center:hover {
width: 100%;
left: 0;
right: 0;
z-index: 5;
}
Don't forget to add the transition to #container-center if you want it to match the other hovers.

Categories

Resources