Printable View
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.
Nice example, but we need a link to the page you have worked on for four hours before we can help.
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.
I have created a copy of what I have now : http://petsafety.info/ so that I can show you.Quote:
Originally Posted by styxlawyer
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.
I have created a copy of what I have now : http://petsafety.info/ so that I can show you.Quote:
Originally Posted by styxlawyer
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.
Hi there angelium,
and a warm welcome to these forums. ;)
Here is a possible solution - ( not tested to destruction )...
Code:
<!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
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!
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...
...into that location.Code:
<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>
You should then have C&P'd this...
...into the head section of the document.Code:
<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>
I hope that this helps. ;)
coothead
Oups sorry, my bad.
IT works now ;)
HUUUGE ThanK YOU
No problem, you're very welcome. ;)
coothead