I am using flexslider with a caption on each slide.
This works, except I want the caption to be at the top of the slide, not the bottom.
The only way I can see to put the caption at the top is to position it absolutely, but when I do that, the width of the caption is too wide (thousands of pixels, instead of as wide as the parent element).
<div class="flexslider">
<ul class="slides">
<li>
<img src="data/homeSlides/brennys.jpg">
<p class="flex-caption">Brenny's Motorcycle Clinic ></p>
</li>
<li>
<img src="data/homeSlides/aledoFireStation.jpg">
<p class="flex-caption">Aledo Fire Protection District ></p>
</li>
<li>
<img src="data/homeSlides/trueNorth.jpg">
<p class="flex-caption">True North ></p>
</li>
<li>
<img src="data/homeSlides/operationThreshold.jpg">
<p class="flex-caption">Operation Threshold ></p>
</li>
<li>
<img src="data/homeSlides/sadler.jpg">
<p class="flex-caption">Sadler ></p>
</li>
</ul>
</div>
the css:
.flex-caption {
background:rgba(73, 92, 94, 1);
height:50px;
line-height:50px;
margin:0;
text-align:right;
color:#ff5200;
padding-right:20px;
bottom:0;
width:98%;
}
jsFiddle
how do I get the caption to display properly at the top of the slide?
.flex-caption {
background:rgba(73, 92, 94, 1);
height:50px;
line-height:50px;
margin:0;
text-align:right;
color:#ff5200;
padding-right:20px;
top:0;
right:20%; /*Adjust this by yourself to make it look better*/
width:98%;
position:absolute;
}
ul.slides li{
position:relative; /*You need this*/
}
#wrapper{
width:80%;
}
you need some adjustement, first you need to set li relative so it becomes the reference box for absolute childs. z-index will bring the text on top for sure:
$(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
.flex-caption {
background: rgba(73, 92, 94, 1);
height: 50px;
line-height: 50px;
margin: 0;
text-align: right;
color: #ff5200;
padding-right: 20px;
top: 0;
left: 0%;/* added */
width: 91%;;/* added */
position: absolute;
z-index: 1;;/* added */
}
li {
position: relative;;/* added */
}
#wrapper {
width: 80%;
}
}
<div id="wrapper">
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/brennys.jpg">
<p class="flex-caption">Brenny's Motorcycle Clinic ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/aledoFireStation.jpg">
<p class="flex-caption">Aledo Fire Protection District ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/trueNorth.jpg">
<p class="flex-caption">True North ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/operationThreshold.jpg">
<p class="flex-caption">Operation Threshold ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/sadler.jpg">
<p class="flex-caption">Sadler ></p>
</li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
Related
I want to share the initial visible area of my page between a slideshow and my navbar like the below diagram which will then stick at the top when you scroll down the document. This is where I've run into issues.
I've tried doing something like height: 90vh for my slideshow and height: 10vh for my navbar but I want the website to be dynamic and able to fit to most resolutions until you hit cellphone level or at least like 200% zoom on Microsoft edge wherein another stylesheet will be used.
I've also tried placing them within the same div, setting height: 90% for the slideshow and height: auto for the navbar. This worked best in terms of how dynamic it is but the position: sticky obviously didn't work because it only traverses the height of the parent div.
The one that works best is setting the slideshow height to height: 90vh and allowing the navbar to go accordingly. It kinda sorta works but not nearly good enough for me.
The navbar has to initially be at the bottom then stick to the top. If possible I'd rather have a purely CSS solution, but I am open to javascript. Though I'd rather have pure javascript as opposed to jQuery but if it's well explained I'm okay with it.
The actual question is: How do I make my navbar and my slideshow share the initial visible height dynamically?
Here is all the relevant code:
#container {
display: flex;
flex-direction: column;
height: 100vh;
}
.slideshow-base {
flex-grow: 1;
width: 100%;
margin: 0px;
}
.slideshow-container {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.Slides {
position: absolute;
transform: translateX(-100%);
transition: transform 2s;
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
}
.Slides-Images {
width: 100%;
height: 100%;
object-fit: cover;
}
.navbar-base {
font-weight: bold;
z-index: 2;
font-variant: small-caps;
height: 100%;
width: auto;
top: 0px;
background-color: rgba(50, 64, 147, 0.9);
display: block;
border-bottom: 1px solid rgb(226, 208, 0);
}
<div id="container">
<!--Slideshow-->
<div class="slideshow-base" style="background-color: rgb(50, 64, 147); height: 90vh">
<div class="slideshow-container">
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-1.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-2.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-3.jpg" class="Slides-Images">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dot-base">
<span class="dot" onclick="currentSlide(1)">᛫</span>
<span class="dot" onclick="currentSlide(2)">᛫</span>
<span class="dot" onclick="currentSlide(3)">᛫</span>
</div>
</div>
</div>
<hr />
<!--Sticky Navbar-->
<div class="navbar-base" style="width: 100%; height: auto; position: sticky;">
<ul>
<li class="navbar-button" style="display: inline-block;"> #Html.ActionLink("main page", "MainPage", "Home") </li>
<li class="navbar-button" style="display: inline-block;">
#Html.ActionLink("about", "About", "About")
<ul class="navbar-ddmenu">
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("academy", "Academy", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("the club", "DKClub", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("taebo", "TaeBo", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("founders and staff", "Staff", "About")</li>
</ul>
</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("contacts", "Contacts")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("gallery", "Gallery")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("shop dk", "Index", "Shop")</li>
</ul>
</div>
</div>
Use CSS Grids
body {
margin: 0;
}
#container {
width: 100vw;
background: #ccc;
padding: 10px;
height: 100vh;
display: grid;
grid-template-rows: 90vh 10vh;
grid-gap: 10px;
}
#container>div {
background: #999;
}
<section id="container">
<div>Sticky</div>
<div>NavBar</div>
</section>
Ok, I would use a flexbox approach for your initial view, then a bit of js to add a class on scroll:
window.onscroll = function() {
var nav = document.getElementById('nav');
var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop > 100) { // not sure how much you want it to scroll before it is made sticky
nav.classList.add("fixed");
} else {
nav.classList.remove("fixed");
}
}
body {
margin:0;
height:200vh; /* just so there is some scrolling */
}
.container {
height:100vh;
display:flex;
flex-direction:column;
}
.slideshow-base {
flex-grow:1; /* this will make shadow base take the rest of the available height to start with */
}
.fixed {
position:fixed;
top:0;
left:0;
right:0;
}
<div class="container">
<div class="slideshow-base" style="background-color: rgb(50, 64, 147); height: 90vh">
<div class="slideshow-container">
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-1.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-2.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-3.jpg" class="Slides-Images">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dot-base">
<span class="dot" onclick="currentSlide(1)">᛫</span>
<span class="dot" onclick="currentSlide(2)">᛫</span>
<span class="dot" onclick="currentSlide(3)">᛫</span>
</div>
</div>
</div>
<hr />
<!--Sticky Navbar-->
<div id="nav" class="navbar-base">
<ul>
<li class="navbar-button" style="display: inline-block;"> #Html.ActionLink("main page", "MainPage", "Home") </li>
<li class="navbar-button" style="display: inline-block;">
#Html.ActionLink("about", "About", "About")
<ul class="navbar-ddmenu">
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("academy", "Academy", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("the club", "DKClub", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("taebo", "TaeBo", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("founders and staff", "Staff", "About")</li>
</ul>
</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("contacts", "Contacts")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("gallery", "Gallery")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("shop dk", "Index", "Shop")</li>
</ul>
</div>
</div>
You can probably wrap those 2 elements in a wrapper (and optionally give it a height) and use flexbox to make them share space.
In the example below, the slideshow will always cover 90% of the wrapper's height and nav will cover 10% of it.
.slideshow,
.nav {
border: 2px solid #000
}
.wrapper {
display: flex;
flex-direction: column;
height: 90vh
}
.nav {
/* An arbitrary value to start with */
flex-grow: 1;
}
.slideshow {
/* Grow this element 9 times more than the other element. */
flex-grow: 9;
}
<div class="wrapper">
<div class="slideshow">
Slideshow content
</div>
<nav class="nav">
Navigation content
</nav>
</div>
I have many boxes with differents widths. All of them are displayed inline-block so they will be distributed differently as window width changes.
Every box has a big tooltip that will show on hover. These tooltips have a fixed width and height, same for all of the boxes.
These tooltips are position:absolute over the boxes and centered with:
left: 50%;
margin-left: -halfwidth;
My problem is that if the box is close to window left or right they will be partially hidden (I have no problem with top and bottom, they will never reach those edges)
Is there any easy way with javascript (better if jquery) to detect when the element is out of the viewport and then change the left property accordingly to prevent it?
any help, hint or comment will be greatly apreciated. Thank You
JSFIDDLE
html, body {margin:0;padding:0;height:100%;}
ul {
width:100%;
text-align:center;
position:relative;
top:50%;
transform:translateY(-50%);
padding:0;
}
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
.hover-element {
position: absolute;
background-color: yellow;
z-index: 9999;
width: 350px;
height: 175px;
left: 50%;
margin-left: -175px;
bottom:25px;
display: none;
border:1px solid #000;
}
li:hover .hover-element {
display: block;
}
.hover-element:hover {
visibility: hidden;
}
<ul>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
</ul>
Thats all you need, i detected the offset left position of the div, and added the class to li and a small tweaks in css.
$("li").mouseenter(function(){
var f = $(this).find('.hover-element');
var rightEdge = f.width() + f.offset().left;
var leftEdge = f.offset().left;
var screenWidth = $(window).width();
if(leftEdge < 0){
$(this).addClass("left");
$(this).removeClass("right");
}
else if(rightEdge > screenWidth){
$(this).addClass("right");
$(this).removeClass("left");
}
else{
$(this).removeClass("right lefft");
}
});
$("li").mouseleave(function(){
$(this).removeClass("right lefft");
})
html, body {margin:0;padding:0;height:100%;}
ul {
width:100%;
text-align:center;
position:relative;
top:50%;
transform:translateY(-50%);
padding:0;
}
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
.hover-element {
position: absolute;
background-color: yellow;
z-index: 9999;
width: 350px;
height: 175px;
left: 50%;
margin-left: -175px;
bottom:25px;
display: none;
border:1px solid #000;
}
li.left .hover-element{
left: 0;
margin-left: 0;
}
li.right .hover-element{
margin-left: 0;
left: auto;
right: 0;
}
li:hover .hover-element {
display: block;
}
.hover-element:hover {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
</ul>
Have a look:
var windowWidth = document.body.scrollWidth || window.innerWidth;
$('li').on('mouseenter', function(e){
var $hover = $(this).find('.hover-element');
var coords = $hover[0] && $hover[0].getBoundingClientRect();
var rightDistance = 0;
if (coords.left <= 0) {
$hover.css({
'left': ($hover.css('left').split('px')[0] - coords.left) + 'px'
})
}
rightDistance = windowWidth - coords.left - $hover.width() - 2 * $hover.css('borderWidth').split('px')[0];
if (rightDistance < 0) {
$hover.css({
'left': ($hover.css('left').split('px')[0] - (-rightDistance)) + 'px'
})
}
$('p').html($hover.css('left') + '/' + coords.left)
})
html, body {margin:0;padding:0;height:100%;overflow-x: hidden;}
ul {
width:100%;
text-align:center;
position:relative;
top:50%;
transform:translateY(-50%);
padding:0;
}
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
.hover-element {
position: absolute;
background-color: yellow;
z-index: 9999;
width: 350px;
height: 175px;
left: 50%;
margin-left: -175px;
bottom:25px;
display: none;
border:1px solid #000;
}
li:hover .hover-element {
display: block;
}
.hover-element:hover {
visibility: hidden;
}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<ul>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
</ul>
The following links are a starting point for your question (if not the actual answer).
Is there any easy way with javascript (better if jquery) to detect when the element is out of the viewport and then change the left property accordingly to prevent it?
How to tell if a DOM element is visible in the current viewport?
Absolute position of an element on the screen using jQuery
I'm going to mention the steps here. If you'd need the code, just ask for it. I am currently on my mobile device, so typing the code would get hard!
Steps
To make things easy to include JS, change the display property using JS. Accomplish this using a mouse event on each of the list items, that changes their respective tooltip's display property. (Here's how to access the respective child)
In the same hover event, do these:
After changing the display, check if the tooltip element is in viewport. You can refer to the link Victor Medeiros provided.
If is not completely in viewport, change the margin-left property to -175px - (the number of pixels it crossed the boundary by). I just realised, if it crosses the viewport, just set the margin-left or margin-right (as applicable, find it by getBoundingClientRect) to 0.
Yep, that's it! I hope that should work, I haven't tried it out. What's the result?
Change
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
Whit
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: static;
}
I have an absolute div that is behind my footer. When I hover over another element (#snapchat) I want that absolute div to scroll up from behind the footer and stop above it where it can be seen. How would I do this?
.snapcode-footer {
position: absolute;
padding-top: 20px;
text-align: center;
left: 0;
right: 0;
}
.sub-sub-footer {
position: relative;
z-index: 1;
background-color: #F7F7F7;
padding-top: 35px;
padding-bottom: 20px;
}
.sub-footer {
position: relative;
z-index: 1;
background-color: #edeeef;
margin-top: 0px;
}
<div class="snapcode-footer">
<img src="https://wumbo.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>
<div class="sub-sub-footer">
<ul class="social-footer">
<li id="twitter"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter #wumbo"/></li>
<li id="snapchat"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #wumbo"/></li>
<li id="insta"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram #wumbo"/></li>
<li id="facebook"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook #wumbo"/></li>
</ul>
</div>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-md-5-footer">
<div class="footer-img">
<img src="https://www.wumbo.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarer™"/>
<div/>
</div>
</div>
I'm re-positioned your div.snapcode footer and applied a css property to
#snapchat:hover ~ .snapcode-footer . hopes this will help you :)
.snapcode-footer {
position: absolute;
padding-top: 90px;
text-align: center;
left: 0;
right: 0;
}
.sub-sub-footer {
position: relative;
z-index: 1;
background-color: #F7F7F7;
padding-top: 35px;
padding-bottom: 20px;
}
.sub-footer {
position: relative;
z-index: 1;
background-color: #edeeef;
margin-top: 0px;
}
#snapchat:hover ~ .snapcode-footer{
z-index:999;
color:green;
position:relative;
margin-bottom:100px;
margin-left:50px;
}
<div class="sub-sub-footer">
<ul class="social-footer">
<li id="twitter"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter #hullandspar"/></li>
<li id="snapchat"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #hullandspar"/></li>
<div class="snapcode-footer">
<img src="https://hullandspar.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>
<li id="insta"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram #hullandspar"/></li>
<li id="facebook"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook #hullandspar"/></li>
</ul>
</div>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-md-5-footer">
<div class="footer-img">
<img src="https://www.hullandspar.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarer™"/>
</div>
</div>
</div>
I'd suggest giving snapcode-footer an id to make it easier to control.
<div class="snapcode-footer" id="snapcode">
<script>
var hover = 0;
</script>
Then you make a script on #snapchat
<li id="snapchat"onmouseenter="hover = 1" onmouseout="hover = 0"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #hullandspar"/></li>
Lastly, you make a script for if the mouse is hovering over the #snapchat element to increase height or to stay in one place
<script>
setInterval("if(hover == 1){snapcode.top--}");
setInterval("if(hover == 0){snapcode.top = 0}");
</script>
I have a site I'm working on where I have a nav bar in a div at the top of the page followed by a separate div which contains an image directly below it.
I'm trying to figure out the best way to change the image by hovering over each part of the nav bar.
Basically I want an image for home to show up when the home nav feature is hovered and so on with the rest of the menu.
UPDATE:
As I tried to explain before (not as clear as I could have) I want to make each nav bar element (Home, Downloads, etc.) show a different image in the div below it. Here is the section of code for the two elements.
<li class="active">Home</li>
<li >About</li>
<li >Mods</li>
<li>Forums</li>
<li >Downloads</li>
<li>Blog</li>
</ul>
</div>
</nav>
<div class="parallax-container">
<div class="container" style="background: rgb(55,71,79); width:960px; padding-top: 10px; padding-left: 50px; border: 2px; border-radius: 50px;">
<div class="row">
<div class="hover-image white-text col s12 l6">
<img src="homeimage.png" class="hover image" style="height:auto; width:auto; max-width: 860px; max-height: 860px;"/>
<h5 class="hover-header" style="padding-left: 20px;">Home</h2>
<p class="hover-paragraph" style="padding-left: 25px;">Welcome to the page!</p>
</div>
</div>
</div>
<div class="parallax"><img src="/img/image.png"></div>
</div>
<style>
.hover-image {
position: relative;
width: 100%;
margin: auto;
}
.hover-header {
position: absolute;
top: 350px;
left: 10;
width: 100%;
}
.hover-paragraph {
position: absolute;
top: 380px;
width: 100%;
}
</style>
Page Layout
Try CSS something like this;
.nav:hover .image{
background-image: url('path/to/image.ext');
}
If you can share your code, I can be more specific.
try this code -
CSS -
#navImage img{
display:block;
width:500px;
height:auto;
}
#myNav{
list-style-type: none;
}
#myNav li {
display: inline;
padding: 10px;
}
#myNav li a:hover {
color:#00ffff;
}
#navImage img{
display:none;
}
HTML
<ul id="myNav">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<div id="navImage">
<img src="img_chania.jpg" alt="Chania">
<img src="img_chania2.jpg" alt="Chania">
<img src="img_flower.jpg" alt="Flower">
<img src="img_flower2.jpg" alt="Flower">
</div>
JS to initialize (with jQuery) -
$("#myNav li a").on('mouseover', function(){
$("#navImage img").hide().eq($(this).closest('li').index()).show();
});
Please note, if you are working on responsive design(using bootstrap navigation), you need to do changes accordingly.
jsfiddle - https://jsfiddle.net/guruling/k2zgot5r/
.myButtonLink {
display: block;
width: 100px;
height: 100px;
background: url('/path/to/myImage.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}
<a class="myButtonLink" href="#LinkURL">Leaf</a>
Do you want something like this. Please check this link:-http://kyleschaeffer.com/development/pure-css-image-hover/
I have set up 3 divs, one on the left and two on the right on top of each other.
I want the 'onclick' to make the div on the left slide out from the left
and one of divs on the right-top to go up and the one on the right-bottom to slide in from the right.
After that animations are finished I want the next time I press the 'onclick' button to do the same to the next divs (with different content) to come in from the points the previous divs came.
I've managed to change the background color of the div's but not the content and animations.
This is what I've gotten so far.
$(document).ready(function(){
$('#next').click(function(){
if ($('.active').next('.case').length) {
$('.active').removeClass('active')
.next('.case')
.addClass('active');
}
});
$('#prev').click(function(){
if ($('.active').prev('.case').length) {
$('.active').removeClass('active')
.prev('.case')
.addClass('active');
}
});
});
html,body,section{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#next,#prev{
position:fixed;
z-index:101;
}
#next{
right:0px;
}
#prev{
left:0px;
}
#t1{
float:left;
height:100%;
width:43%;
background-color: #c92639;
position: absolute;
left: 0px;
}
#logo >h1{
color: white;
}
#logo >h3{
width: 58%;
margin: 0 auto;
}
#t2,#t3{
height: 50%;
width: 57%;
margin-left: auto;
margin-right: 0px;
}
#t3{
position: absolute;
right: 0px;
bottom: 0px;
background-color: #c8c8c8;
}
#t2{
background-color: white;
position: absolute;
right: 0px;
top: 0px;
}
#t2 >img{
margin-top: 11%;
}
#logo{
margin-top: 40%;
}
#t3>ul{
display: inline-table;
width: 80%;
margin: 0 auto;
margin-top: 50px;
}
#t3>ul>li{
display: inline-table;
width: 33%;
}
#t3>ul>li>div>img{
width: 53%;
margin-top: 25%;
}
#home{
display: none !important;
}
#circle1,#circle2,#circle3{
border-radius: 128px;
width: 150px;
height: 150px;
margin: 0 auto;
box-shadow: 10px 10px 5px #888888;
}
#circle1{
background: #32325f;
}
#circle2{
background: white;
}
#circle3{
background: #ef9d34;
}
.active{
display:initial !important;
z-index:100;
}
#case{
display:none;
position:absolute;
top:0px;
height: 100%;
width: 100%;
z-index:99;
}
.stern1{
background:blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="next">
<h1>next</h1>
</div>
<div id="prev">
<h1>prev</h1>
</div>
<div id="case" class="case active">
<div id="t1" class="tcee1">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="case tcee2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tcee3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
<div id="case" class="case">
<div id="t1" class="tstern1" style="background:blue;">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
<div id="case" class="case">
<div id="t1" class="tstern1" style="background:black;">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
have a look at this simple tutorial, its worked fine for me and you can add / improve it as well.
simple javascript slideshow