Split screen hompage

  • dannybuzzby365
  • Newbie
  • Newbie
  • dannybuzzby365
  • Posts: 6

Post 82 days ago

Hi there peeps

I am trying something somewhat ambitious. I am attempting to make the front page of www(dot)dreamrandom(dot)com

I have gotten the split screen but its the image to appear on either side of the split screen that i am having a little problem with, can anyone help me with this?

the site is grantly(dot)org

as you will see from when you move your mouse over the split, the left side works fine but the right side overlaps the left side. this is not what i want at all. both sides should ease when the mouse rolls over left or right but there shouldnt be any overlap.

This is the page code

Code: [ Select ]
<div class="container">
<div id="splitlayout" class="splitlayout">
<div class="intro">
<div class="side side-left">
<div class="intro-content">
<div class="profile">
<h1><a href="#">Enter The Site</a></h1>
</div>
</div>
<div class="overlay"></div>
</div>
<div class="side side-right">
<div class="intro-content">
<div class="profile">
<h1><a href="#">Contact me directly</a></h1>
</div>
</div>
<div class="overlay"></div>
</div>
</div>
</div>
</div>
  1. <div class="container">
  2. <div id="splitlayout" class="splitlayout">
  3. <div class="intro">
  4. <div class="side side-left">
  5. <div class="intro-content">
  6. <div class="profile">
  7. <h1><a href="#">Enter The Site</a></h1>
  8. </div>
  9. </div>
  10. <div class="overlay"></div>
  11. </div>
  12. <div class="side side-right">
  13. <div class="intro-content">
  14. <div class="profile">
  15. <h1><a href="#">Contact me directly</a></h1>
  16. </div>
  17. </div>
  18. <div class="overlay"></div>
  19. </div>
  20. </div>
  21. </div>
  22. </div>


and here is the css for it

Code: [ Select ]
.page-id-218 body {
    overflow-y: scroll;
    background: #333;
}

.page-id-218 .splitlayout {
    position: relative;
    overflow-x: hidden;
    min-height: 100%;
    width: 100%;
}

/* Intro sides */
.page-id-218 .side {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 50%;
    height: 100%;
    text-align: center;
    -webkit-backface-visibility: hidden;
}

.page-id-218 .open-left .side,
.page-id-218 .open-right .side {
    cursor: default;
}

.page-id-218 .overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 499;
    visibility: hidden;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.page-id-218 .side-left .overlay {
    background: rgba(0,0,0,0.7);
}

.page-id-218 .side-right .overlay {
    background: rgba(0,0,0,0.3);
}

.page-id-218 .side-left {
    left: 0;
    background: #623692;
    color: #323232;
    outline: 1px solid #47a3da; /* avoid gap */

}

.page-id-218 .side-right {
    right: 0;
    background: #323232;
    color: #623692;
    outline: 1px solid #323232; /* avoid gap */
}

/* Intro content, profile image and name, back button */
.page-id-218 .intro-content {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0 1em;
    width: 50%;
    cursor: pointer;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

.page-id-218 .profile {
    margin: 0;
    width: 1000px;
    height: 500px;
    /*background: #623692;*/
}

.page-id-218 .profile {
    background: url('/wp-content/uploads/2016/11/bg1.jpg');

}
.page-id-218 .profile:hover {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  z-index: 1000;
}

.page-id-218 .intro-content h1 > span {
    display: block;
    white-space: nowrap;
}

.page-id-218 .intro-content h1 > span:first-child {
    font-weight: 300;
    font-size: 2em;
line-height: 1em;
}

.page-id-218 .intro-content h1 > span:nth-child(2) {
    position: relative;
    margin-top: 0.5em;
    padding: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8em;
}

.page-id-218 .intro-content h1 > span:nth-child(2):before {
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 2px;
    background: #323232;
    content: '';
}

.page-id-218 .side-right .intro-content h1 > span:nth-child(2):before {
    background: #623692;
}

.page-id-218 .intro h1 {
line-height: 1em !important;
}
  1. .page-id-218 body {
  2.     overflow-y: scroll;
  3.     background: #333;
  4. }
  5. .page-id-218 .splitlayout {
  6.     position: relative;
  7.     overflow-x: hidden;
  8.     min-height: 100%;
  9.     width: 100%;
  10. }
  11. /* Intro sides */
  12. .page-id-218 .side {
  13.     position: fixed;
  14.     top: 0;
  15.     z-index: 100;
  16.     width: 50%;
  17.     height: 100%;
  18.     text-align: center;
  19.     -webkit-backface-visibility: hidden;
  20. }
  21. .page-id-218 .open-left .side,
  22. .page-id-218 .open-right .side {
  23.     cursor: default;
  24. }
  25. .page-id-218 .overlay {
  26.     position: absolute;
  27.     top: 0;
  28.     left: 0;
  29.     z-index: 499;
  30.     visibility: hidden;
  31.     width: 100%;
  32.     height: 100%;
  33.     opacity: 0;
  34. }
  35. .page-id-218 .side-left .overlay {
  36.     background: rgba(0,0,0,0.7);
  37. }
  38. .page-id-218 .side-right .overlay {
  39.     background: rgba(0,0,0,0.3);
  40. }
  41. .page-id-218 .side-left {
  42.     left: 0;
  43.     background: #623692;
  44.     color: #323232;
  45.     outline: 1px solid #47a3da; /* avoid gap */
  46. }
  47. .page-id-218 .side-right {
  48.     right: 0;
  49.     background: #323232;
  50.     color: #623692;
  51.     outline: 1px solid #323232; /* avoid gap */
  52. }
  53. /* Intro content, profile image and name, back button */
  54. .page-id-218 .intro-content {
  55.     position: absolute;
  56.     top: 50%;
  57.     left: 50%;
  58.     padding: 0 1em;
  59.     width: 50%;
  60.     cursor: pointer;
  61.     -webkit-transform: translateY(-50%) translateX(-50%);
  62.     transform: translateY(-50%) translateX(-50%);
  63. }
  64. .page-id-218 .profile {
  65.     margin: 0;
  66.     width: 1000px;
  67.     height: 500px;
  68.     /*background: #623692;*/
  69. }
  70. .page-id-218 .profile {
  71.     background: url('/wp-content/uploads/2016/11/bg1.jpg');
  72. }
  73. .page-id-218 .profile:hover {
  74.   -webkit-transform: scale(1.5);
  75.   -ms-transform: scale(1.5);
  76.   -o-transform: scale(1.5);
  77.   transform: scale(1.5);
  78.   z-index: 1000;
  79. }
  80. .page-id-218 .intro-content h1 > span {
  81.     display: block;
  82.     white-space: nowrap;
  83. }
  84. .page-id-218 .intro-content h1 > span:first-child {
  85.     font-weight: 300;
  86.     font-size: 2em;
  87. line-height: 1em;
  88. }
  89. .page-id-218 .intro-content h1 > span:nth-child(2) {
  90.     position: relative;
  91.     margin-top: 0.5em;
  92.     padding: 0.8em;
  93.     text-transform: uppercase;
  94.     letter-spacing: 1px;
  95.     font-size: 0.8em;
  96. }
  97. .page-id-218 .intro-content h1 > span:nth-child(2):before {
  98.     position: absolute;
  99.     top: 0;
  100.     left: 25%;
  101.     width: 50%;
  102.     height: 2px;
  103.     background: #323232;
  104.     content: '';
  105. }
  106. .page-id-218 .side-right .intro-content h1 > span:nth-child(2):before {
  107.     background: #623692;
  108. }
  109. .page-id-218 .intro h1 {
  110. line-height: 1em !important;
  111. }


I would really appreciate any help on this. the dreamrandom site is what i want to achieve. by all means stick your own image in there to get it working. i will replace it with mine so i can see the same result.

Many thanks in advance
  • dannybuzzby365
  • Newbie
  • Newbie
  • dannybuzzby365
  • Posts: 6

Post 78 days ago

is there no one on here that can help me out?

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 25 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.