Image Over Hover

[L C]

Issues:
1. TEST colors and fades
2. An approximate 20px border on the right side
3. TEST 1 image is being cut off at the bottom despite the image I'm using


Here is the code:

<div class="nav-wrap">
<div class="img-place"></div>
<div class="nav">
<div class="ex1">
<div class="ex2">
<div class="ab1">
<div class="ab2">
<div class="ab3">

<ul>

<li class="ex1">HELLO</li>
<li class="ex2">THERE</li>

<li class="ab1"><a href="#W" data-target="bg1">TEST 1</a></li>
<li class="ab2"><a href="#E" data-target="bg2">TEST 2</a></li>
<li class="ab3"><a href="#F" data-target="bg3">TEST 3</a></li>
</ul>
</div>
</div>

<style>

li.ex1 {
font-family: 'HelveticaNeue';
position: relative;
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 74px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -20px;
padding: 288px 0px 0px 77px;
transition: all 0.5s ease-in-out;
}

li.ex2 {
font-family: 'HelveticaNeue';
position: relative;
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 74px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 0px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}

.nav-wrap{
width: 100%;
height: 770px;
background: #111;
position: relative;
}

.nav-wrap .img-place {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 5;
}

.nav-wrap .nav li {
font-family: 'HelveticaNeue';
position: relative;
z-index: 6;
list-style: none;
}

.nav-wrap .nav li.ab1 {
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 48px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 24px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}

.nav-wrap .nav li.ab2 {
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 48px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 0px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}
.nav-wrap .nav li.ab3 {
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 48px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 0px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}

.nav-wrap .nav:hover li a {
opacity: 0.3;
}

.nav-wrap .nav li a:hover {
opacity: 1;
padding-left: 95px;
font-weight: 600;
}

.nav-wrap .bg1 {
background-image: url("http://www.photography-match.com/vi...illage_and_Annapurna_South_Nepal_Himalaya.jpg");
background-size: 120%;
opacity: 0.3;

-webkit-animation: fadein 2s forwards;
-moz-animation: fadein 2s forwards;
-ms-animation: fadein 2s forwards;
-o-animation: fadein 2s forwards;
animation: fadein 2s forwards;

-webkit-animation: mymove 11s forwards ease-out;
animation: mymove 11s forwards ease-out;
}

@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

@-webkit-keyframes mymove {
0% {top: -16px;}
100% {top: -330px;}
}

@keyframes mymove {
0% {top: -16px;}
100% {top: -330px;}
}

.nav-wrap .bg2 {
background-image: url("http://travspire.com/wp-content/uploads/2013/06/Glimpse_of_hampi_main.jpg");
background-size: 125%;
opacity: 0.4;
animation: bgani 7s linear forwards;
}

.nav-wrap .bg3 {
background-image: url("http://lh5.ggpht.com/_nFOgRvQfbY4/SqDwU31NB8I/AAAAAAAAATE/Jo1zuHhJaDA/s1600/IMG_4278.JPG");
background-size: 130%;

-webkit-animation: fadein 3s forwards ease-out;
-moz-animation: fadein 3s forwards ease-out;
-ms-animation: fadein 3s forwards ease-out;
-o-animation: fadein 3s forwards ease-out;
animation: fadein 3s forwards ease-out;
}

@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes bgani {
0% {
opacity: 0;
background-size: 100%;
}
15% {
opacity: 0.3;
}
100% {
background-size: 125%;
}

</style>

<script type="text/java script" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$('.nav li a').hover(function() {
$('.img-place').toggleClass($(this).data('target'));
});
$('.nav-wrap .img-place, .nav-wrap').height($(window).height());

</script>

 

[chrishirst]

And "TEST 1" image is .... where exactly???

Also:
You do know what this CSS property value "margin: -12px;" will do to an element and any surrounding elements?

 

[L C]

--Chrishirst

Thanks for the reply.

I updated the HTML with the "TEST" elements. Sorry about that.

I used the -12px parameter because it was the only way I could get the element positioned on the page where I wanted it. I wasn't aware of other effects...which are?


L C

 

[chrishirst]

I wasn't aware of other effects...which are?

The 'side effects' are what it does to the document flow and the "stack up" of element positionally. A margin of -12px all around without any corrective adjustments following it, 'moves' all static elements and relative positioned ones without offsets, 24 px leftwards and 24 px 'upwards' which probably accounts for your ~20px 'right border'.

Without actually having your images available to test with it is impracticable to be exact, but I would suggest that you remove the negative margins, and instead apply relative positioning with -12px of top and left offsets and then, if necessary, adjust the element flow with bottom and right negative margins on the same element or on the following elements using "sibling selectors"

 

[L C]

--Chreshirst

Thanks for the detail. That fixed that right border.

Outstanding Issues:

1. The "TEST" series are not displaying properly (slide, font color, hover color, hover font change, decoration (they are underlined for some reason), fade in)
2. TEST 1 image is being cut off on the bottom and not fading in
3. The black background now has a top border
4. ex1 is no longer displaying correctly

I put a sample into jsfiddle:

http://jsfiddle.net/LCfiddle/wfpzLv8n/7/

Suggestions?

L C

 

[chrishirst]

Oh dear deity I really do detest those stupid 'fiddle' things, just give us a real URL without having half-a-dozen 'frames' getting in the way. It's like being back in 1993 when using frames was de rigueur for every website.

If you need some free web space temporarily ... I will give you some space, it's not a problem.

 

[L C]

Here is the latest version:

http://jsfiddle.net/LCfiddle/ahxd670g/


There now remain only three issues

1. SUB 1, 2, and 3 are initiated when the mouse goes over the page instead of directly over each of the SUB elements.

2. The image that scrolls when SUB 1 is hovered over is cut off at the bottom.

3. There is about a 20px border at the top of the page that is seen when the SUB element images display.

Any suggestions would be appreciated.

L C