Log in

View Full Version : 2 column with 2 fullscreen background CSS ONLY


angelium
11-19-2016, 12:08 PM
Hello,

It has been 4 hours since i am trying to have 2 fullscreen column on my homepage, where each column has a background image and when you hover it ( the column) its background image covers all the page. With CSS only. Here is an exemple : http://bartabas.fr/

I am using wordpress ( divi theme).

Thank you for you help.
styxlawyer
11-19-2016, 12:15 PM
Nice example, but we need a link to the page you have worked on for four hours before we can help.
angelium
11-19-2016, 12:37 PM
Hello styxlawyer, thanks! My website is under construction, if i give you the page you will reach the underconstruction page unfortunatly.
I have two column on my page, like in the exemple, static ( not moving yet, when you hover it), but this is not the most important.
also, i have 2 background images: Left Half and Right Half. I can put a 100%background image over the 2 columns if necessary.
angelium
11-20-2016, 12:04 AM
Nice example, but we need a link to the page you have worked on for four hours before we can help.

I have created a copy of what I have now : http://petsafety.info/ so that I can show you.

What I want :
when you go to column CAT, the background image “CAT” fill the whole page…same for The DOG.

“blablabla” and the button “DISCOVER” should not be displayed. Only when you hover IT.

Result – exemple : http://http://bartabas.fr/

Thank you for you help.
angelium
11-20-2016, 12:09 AM
Nice example, but we need a link to the page you have worked on for four hours before we can help.

I have created a copy of what I have now : http://petsafety.info/ so that I can show you.

What I want :
when you go to column CAT, the background image “CAT” fill the whole page…same for The DOG.

“blablabla” and the button “DISCOVER” should not be displayed. Only when you hover IT.

Result – exemple : http://http://bartabas.fr/

Thank you for you help.
coothead
11-20-2016, 03:05 AM
Hi there angelium,


and a warm welcome to these forums. ;)

Here is a possible solution - ( not tested to destruction )...



<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html,body {
height: 100%;
margin: 0;
}

#container {
position: relative;
display: flex;
z-index: 2;
min-height: 100%;
}

#cnt-left,#cnt-right {
width: 50%;
padding: 6em 2em 2em;
box-sizing: border-box;
color: #fff;
text-align: center;
text-shadow: 0 0 0.07em #000, 0 0 0.15em #000;
}

#cnt-left p,#cnt-right p {
display: none;
}

#cnt-left:hover p, #cnt-left:active p,
#cnt-right:hover p, #cnt-right:active p {
display: block;
}

#cnt-left a, #cnt-right a {
display: none;
width: 10.5em;
line-height: 4em;
border: 0.06em solid #fff;
border-radius: 0.5em;
margin: 2em auto 0;
background-color: rgba(0,0,0,0.1);
box-shadow: inset 0 0 1.5em #fff;
color: #fff;
text-decoration: none;
}

#cnt-left:hover a, #cnt-left:active a,
#cnt-right:hover a, #cnt-right:active a {
display: block;
}

#cnt-left a::after, #cnt-right a::after {
content: '\003e';
margin-left: -0.5em;
opacity: 0;
transition: all 0.25s ease-in-out;
}

#cnt-left a:hover::after, #cnt-left a:active::after,
#cnt-right a:hover::after, #cnt-right a:active::after {
margin-left: 0.5em;
opacity: 1;
}

#bg-img {
position: absolute;
width: 100%;
min-height: 100%;
top: 0;
left: 0;
z-index: -1;
background-image: url(http://petsafety.info/wp-content/uploads/2016/11/CAT.jpg),
url(http://petsafety.info/wp-content/uploads/2016/11/DOG.jpg);
background-size: 50% 100%, 50% 100%;
background-position: 0 0,100% 0;
background-repeat: no-repeat,no-repeat;

}
#cnt-left:hover ~ #bg-img,
#cnt-left:active ~ #bg-img {
background-size: 100% 100%, 0 0;
}

#cnt-right:hover ~ #bg-img,
#cnt-right:active ~ #bg-img {
background-size: 0 0, 100% 100%;
}

@media screen and (max-width: 30em) {

#container {
display: block;
height: 100%;
}

#cnt-left, #cnt-right {
width: 100%;
min-height: 50%;
padding: 1em;
}

#bg-img {
background-size: 100% 50%, 100% 50%;
background-position: 0 0,0 100%;
}
}
</style>

</head>
<body>

<div id="container">

<div id="cnt-left">
<h2>CAT</h2>
<p>
Lorem ipsum dolor sit amet.
</p>
<a href="#">miaou</a>
</div>

<div id="cnt-right">
<h2>DOG</h2>
<p>
Lorem ipsum dolor sit amet.
</p>
<a href="#">wouf</a>
</div>

<div id="bg-img"></div>

</div>

</body>
</html>



coothead
angelium
11-21-2016, 10:48 AM
Thank you so much coothead !! :)
I've tried it and it works !

Here's the result :
http://petsafety.info/dog-page/

Do you know how i can remove the white space on top of it please? (i can see a arrow" –> " in the screen on the top).

I will adjust the position of the text ( center ) and it will be perfect.

THANK YOU AGAIN YOU'RE THE BEST!
coothead
11-21-2016, 11:27 AM
Hi there angelium,


it appears that you C&P'd the entire code that I gave you into your document. :eek:

You should have just C&P'd this...



<div id="container">

<div id="cnt-left">
<h2>CAT</h2>
<p>
Lorem ipsum dolor sit amet.
</p>
<a href="#">miaou</a>
</div>

<div id="cnt-right">
<h2>DOG</h2>
<p>
Lorem ipsum dolor sit amet.
</p>
<a href="#">wouf</a>
</div>

<div id="bg-img"></div>

</div>

...into that location.

You should then have C&P'd this...



<style media="screen">
html,body {
height: 100%;
margin: 0;
}

#container {
position: relative;
display: flex;
z-index: 2;
min-height: 100%;
}

#cnt-left,#cnt-right {
width: 50%;
padding: 6em 2em 2em;
box-sizing: border-box;
color: #fff;
text-align: center;
text-shadow: 0 0 0.07em #000, 0 0 0.15em #000;
}

#cnt-left p,#cnt-right p {
display: none;
}

#cnt-left:hover p, #cnt-left:active p,
#cnt-right:hover p, #cnt-right:active p {
display: block;
}

#cnt-left a, #cnt-right a {
display: none;
width: 10.5em;
line-height: 4em;
border: 0.06em solid #fff;
border-radius: 0.5em;
margin: 2em auto 0;
background-color: rgba(0,0,0,0.1);
box-shadow: inset 0 0 1.5em #fff;
color: #fff;
text-decoration: none;
}

#cnt-left:hover a, #cnt-left:active a,
#cnt-right:hover a, #cnt-right:active a {
display: block;
}

#cnt-left a::after, #cnt-right a::after {
content: '\003e';
margin-left: -0.5em;
opacity: 0;
transition: all 0.25s ease-in-out;
}

#cnt-left a:hover::after, #cnt-left a:active::after,
#cnt-right a:hover::after, #cnt-right a:active::after {
margin-left: 0.5em;
opacity: 1;
}

#bg-img {
position: absolute;
width: 100%;
min-height: 100%;
top: 0;
left: 0;
z-index: -1;
background-image: url(http://petsafety.info/wp-content/uploads/2016/11/CAT.jpg),
url(http://petsafety.info/wp-content/uploads/2016/11/DOG.jpg);
background-size: 50% 100%, 50% 100%;
background-position: 0 0,100% 0;
background-repeat: no-repeat,no-repeat;

}
#cnt-left:hover ~ #bg-img,
#cnt-left:active ~ #bg-img {
background-size: 100% 100%, 0 0;
}

#cnt-right:hover ~ #bg-img,
#cnt-right:active ~ #bg-img {
background-size: 0 0, 100% 100%;
}

@media screen and (max-width: 30em) {

#container {
display: block;
height: 100%;
}

#cnt-left, #cnt-right {
width: 100%;
min-height: 50%;
padding: 1em;
}

#bg-img {
background-size: 100% 50%, 100% 50%;
background-position: 0 0,0 100%;
}
}
</style>


...into the head section of the document.

I hope that this helps. ;)



coothead
angelium
11-21-2016, 12:28 PM
Oups sorry, my bad.

IT works now ;)

HUUUGE ThanK YOU
coothead
11-21-2016, 02:16 PM
No problem, you're very welcome. ;)


coothead