How do I add a mouseover event to an image

How do I add a mouseover event to an image - javascript

I am trying to create a mouseover event that would turn my images background to black while adding text that would describe the link to another web-page. But everything that I have tried either in CSS or JavaScript does not work and I get errors, not sure how to fix the problem?
var one = document.getElementById("one");
addEventListner("mouseover", link);
addEventListner("mouseout", linkOut);
function link() {
one.style.backgroundColor = "black";
one.textContent = "Our Games";
one.style.textAlign = "center";
one.style.verticalAlign = "middle";
}
function linkOut() {
one.style.backgroundColor = "";
one.textContent = "";
}
This is my my CSS, I think that the overlay option is not working
do to the grid that I have set up for my images. But I am
not quit sure why it wont work.
#dragon {
height: 200px;
}
#chaos {
height: 600px;
}
#logo {
height: 150px;
}
#thunder {
height: 600px;
}
#dice {
height: 235px;
}
h1 {
color: white;
text-align: center;
padding: 32px;
padding-bottom: 0px;
}
/*--------------grid for my images--------------------------*/
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: black;
}
.row {
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 33.33%;
flex: 33.33%;
max-width: 33.33%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/*--------------overlay for links--------------------------*/
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.column:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
This is my HTML
<div class="row">
<div class="column">
<a id="one" href="#"><img id="chaos" src="cardchaos.jpg" alt=""></a>
</div>
<div class="column">
<a id="two" href="#"><img id="dragon" src="dragon card.gif" alt=""></a>
<img id="logo" src="logo.png" alt="">
<a id="three" href="#"><img id="dice" src="Img Try Again.jpg" alt=""></a>
</div>
<div class="column">
<a id="four" href="#"><img id="thunder" src="Thunder Bolt.jpg" alt=""></a>
</div>
</div>

You have a typo in your script. Also what you are trying to do is that you edit the element directly. If you try to remove the textcontent of the element on mouseleave you will lose the original element as well. I recommend doing this with css.
<div class="container">
<img src="https://images.unsplash.com/photo-1529981188441-8a2e6fe30103?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
.container {
position: relative;
width: 300px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
Have a look of my example and then underneath I fixed your version what is happening. https://codepen.io/shnigi/pen/pojQxNB

Related

completely fit the toggle bar inside the div

my english is not very good, i hope i can explain what i want to say
I want to fit my toggle icon inside div. I couldn't do it, can you show me how to do it?
I want it to be shaped according to the size of the div. when the div shrinks, the toggle menu should also shrink
I want to make the image in the top image like the bottom image
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.btn5 .icon {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 50px;
background-color: white;
}
.btn5 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: -20px;
}
.btn5 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: 20px;
}
.btn5.open .icon {
transition: 0.5s;
}
.btn5.open .icon:before {
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
.btn5.open .icon:after {
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
}
.btn5:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon"></div>
</div>
</div>
Thank you in advance for your help :)

This snippet will get you closer to your second image. I changed up the structure a bit and just used a couple spans and positioned them absolute. You can tinker with the animation to your hearts content.
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
display:flex;
align-items: center;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.icon {
width:150px;
height:150px;
position: relative;
}
.btn5 .bar {
transition-duration: 0.5s;
position: relative;
height: 8px;
width: 100%;
height: 20px;
display: block;
background-color: white;
}
.bar:nth-of-type(1) {
position: absolute;
top: 0;
left: 0;
}
.bar:nth-of-type(2) {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.bar:nth-of-type(3) {
position: absolute;
bottom: 0;
left: 0;
}
.menu.open .bar:nth-of-type(1) {
transform: rotate(-45deg);
top: 10px;
left: -16px;
}
.menu.open .bar:nth-of-type(3) {
transform: rotate(45deg);
bottom: 10px;
left: -16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>

Animated hamburger navigation

I'm creating a full page navigation shade for my site so that it's the same across all devices. At the moment I have two buttons, one for when the shade is in view and one for when it isn't. I'm wondering if it would be better to have one button always present so it can be animated? I'd be aiming for something like the squeeze animation here but I'm not sure how I'd go about animating that across the two buttons vs just one - or how you'd create it from scratch.
Here's what I'm working with;
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
z-index: 2;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align:center;
}
.nav-action {
height: 50px;
width: 50px;
}
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<button class="nav-action">
<p>☰</p>
</button>
</div>
</div>
<div class="site-nav">
<div class="site-nav-action-container">
<button class="nav-action">
<p>×</p>
</button>
</div>
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
At the moment the shade now functions to be visible or not based on button pressed but I wonder if having one button is the way to go or if placing the icon outside of a button would work best.
Ideally the hamburger would animate as the shade is revealed from the top but I'll work on that once a sensible approach to the button is sorted. Any help would be appreciated because I clearly don't know what I'm doing here.
Thanks in advance.

You can use for the ☰ to × effect. You can write all the line labels yourself. the first code snippet is an animation that I use a lot, and the second is the animation that I think you want. I installed both so you can use whatever you want to use.
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
const menuIcon = document.querySelector(".menu-icon");
menuIcon.addEventListener("click", () => {
menuIcon.classList.toggle("toggle")
siteNav.classList.toggle('active');
})
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align: center;
}
/* Menu icon */
.menu-icon {
cursor: pointer;
position: absolute;
z-index: 1;
}
.menu-icon div {
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
transition: all .4s ease;
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<!-- Menu icon -->
<div class="menu-icon">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="site-nav">
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
</body>
</html>
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
let icon = document.getElementById("nav-icon");
icon.addEventListener("click", () => {
icon.classList.toggle("open")
siteNav.classList.toggle('active');
})
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align: center;
}
/* NAV ICON */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
top: 8px;
}
#nav-icon span:nth-child(4) {
top: 16px;
}
#nav-icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon {
width: 30px;
height: 25px;
position: absolute;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
z-index: 1;
top: 30px;
}
#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<!-- Menu icon -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="site-nav">
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>

Using overlays on multiple images on one web page

I'm relatively new to coding and I'm using codepen.io to get better, so ignore the actual content its something to practice on. Anyways I'm trying to do multiple overlays on images on one page. I can't seem to figure out how to get the overlays to be on their individual images.
here's the codepen link: https://codepen.io/ToxicCookie/pen/RmXYLv?editors=1000
<html>
<head>
<style>
* {
background-color: #d7c2fc;
font-family: Courier New, monospace;
}
#title {
text-align: Center;
font-size: 50px;
}
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 300px;
height: 250px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 250px;
width: 300px;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
background-color: #008CBA;
}
#animals {
position: fixed;
}
#earth{
position: fixed;
left: 320px;
}
#body{
position: fixed;
left: 630px;
}
</style>
</head>
<body>
<h1 id= "title"> Why be Vegan?</h1>
<div class="container">
<img id="animals" src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg" alt="animals" class="image">
<div class="overlay">
<div class="text">Animals</div>
</div>
</div>
<div class="container">
<img id="earth" src="https://ih1.redbubble.net/image.540939652.0382/flat,550x550,075,f.u2.jpg" alt="earth" class="image" >
<div class="overlay">
<div class="text">Earth</div>
</div>
</div>
<div class="container">
<img id="body" src="https://www.uuwaco.org/wp-content/uploads/2018/09/veggieheart.jpg" alt="body" class="image">
<div class="overlay">
<div class="text">Body</div>
</div>
</div>
</body>

You are making the image to be position:fixed which is the culprit. Remove it and make the container inline-block instead:
* {
background-color: #d7c2fc;
font-family: Courier New, monospace;
}
#title {
text-align: Center;
font-size: 50px;
}
.container {
position: relative;
display: inline-block;
}
.image {
display: block;
width: 300px;
height: 250px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 250px;
width: 300px;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #008CBA;
}
<h1 id="title"> Why be Vegan?</h1>
<div class="container">
<img id="animals" src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg" alt="animals" class="image">
<div class="overlay">
<div class="text">Animals</div>
</div>
</div>
<div class="container">
<img id="earth" src="https://ih1.redbubble.net/image.540939652.0382/flat,550x550,075,f.u2.jpg" alt="earth" class="image">
<div class="overlay">
<div class="text">Earth</div>
</div>
</div>
<div class="container">
<img id="body" src="https://www.uuwaco.org/wp-content/uploads/2018/09/veggieheart.jpg" alt="body" class="image">
<div class="overlay">
<div class="text">Body</div>
</div>
</div>

figure {
position: relative;
max-width: 222px;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
figcaption {
align-items: center;
background-color: whitesmoke;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.5s ease;
}
figure:hover figcaption {
opacity: 0.75;
}
<figure>
<img src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg"
alt="The beautiful MDN logo.">
<figcaption>Animal</figcaption>
</figure>
Notes:
Use semantic HTML element if possible. i.e <figure> & <figcaption>
Add CSS relative position to the parent node of the absolute/fixed position.
Make image responsive if possible height: auto; max-width: 100%. Better to also use the media or image source element <source>.

MenuBar problems showing css html

Hello I have some problems on showing my menu bar when I am looking it from laptop or other devices and I was wondering if someone can help me! The problem is whenever I scroll down to the slideshow or where is the video my menu bar disappear behind the slideshow or the video. I think you will understand it perfectly when you try it.
<!--JavaScript-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
});
function toggleMenu(x) {
x.classList.toggle('openMenu');
}
</script>
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
/*Menu Bar*/
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 0 100px;
transition: all 300ms;
}
nav.black {
background: rgba(0, 0, 0, 0.8);
}
nav .logo {
display: inline-block;
width: 25%;
padding: 0 5px;
line-height: 80px;
font-size: 24px;
transition: all 0.3s;
text-align: center;
}
nav.black .logo {
color: #fff;
}
nav a {
display: inline-block;
width: 12.5%;
line-height: 80px;
color: #151515;
padding: 0 5px;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
text-align: center;
vertical-align: top;
}
nav.black a {
color: #fefefe;
}
nav a:focus {
outline: none;
}
nav a.active {
background: #E2472F;
color: #fff;
border-radius: 6px;
}
section.sec1 {
width: 100%;
height: 100vh;
background: url(img/lol.jpg);
background-size: cover;
background-position: center;
}
/* Hamburger icon */
.hamburger {
display: none;
cursor: pointer;
}
.hamburger .bar1,
.hamburger .bar2,
.hamburger .bar3 {
width: 35px;
height: 5px;
background-color: #fefefe;
margin: 6px 0;
transition: all 0.4s;
}
.openMenu .hamburger .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.openMenu .hamburger .bar2 {
opacity: 0;
}
.openMenu .hamburger .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/*Media*/
#media(max-width: 860px) {
nav {
background: rgba(0, 0, 0, 0.8);
padding: 0 20px;
color: #fefefe;
overflow: hidden;
}
.logo {
position: fixed;
top: 0;
}
nav a {
width: 100%;
line-height: calc((100vh - 80px) / 6);
transform: translateY(80px);
visibility: hidden;
}
.openMenu a {
color: #fefefe;
visibility: visible;
}
.hamburger {
display: inline-block;
position: absolute;
right: 20px;
top: 20px;
}
.openMenu {
height: 100vh;
}
.slider {
width: 100%;
height: 23%;
}
section.sec1 {
width: 100%;
height: 30%;
}
article#video{
width: 100%;
}
video{
width: 100%;
}
aside{
border-bottom:#e8491d 3px solid;
width: 100%;
height: 250px;
}
aside#welcometext{
font-family: cursive;
width: 100%;
height: 76%;
}
aside#New{
font-family: serif;
height: 100%;
width: 100%;
}
}
/*Slideshow*/
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.slider {
overflow: hidden;
height: 450px%;
}
.slider figure div{
width: 20%;
float: left;
}
.slider figure img{
width: 100%;
float: left;
}
.slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 25s slidy infinite;
}
#keyframes slidy{
0% {
left: 0%;
}
10% {
left: 0%;
}
12% {
left: -100%;
}
22% {
left: -100%;
}
24% {
left: -200%;
}
34% {
left: -200%;
}
36% {
left: -300%;
}
46% {
left: -300%;
}
48% {
left: -400%;
}
58% {
left: -400%;
}
60% {
left: -300%;
}
70% {
left: -300%;
}
72% {
left: -200%;
}
82% {
left: -200%;
}
84% {
left: -100%;
}
94% {
left: -100%;
}
96% {
left: 0%;
}
}
/*Welcome*/
article{
float: left;
margin: 0 auto;
width: 23%;
height: auto;
}
#welcometext{
float: right:
margin: 0 auto;
width: 100%;
height: auto;
border-bottom:#e8491d 3px solid;
height: 38%;
}
#News1{
margin-left: 5%;
width: 52%;
height: 7%;
display: inline-flex;
}
section.News{
border-bottom:#e8491d 3px solid;
height: 100%;
}
aside#New{
padding: 27%;
height: 100%;
width: 100%;
font-family: cursive;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title> Landschaft </title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!--Body-->
<body>
<div class="wrapper">
<nav>
<div class="hamburger" onclick="toggleMenu(this.parentNode);">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="logo">Landschaft</div><a href="index.html">НАЧАЛО</a
><a href="about.html">СЪБИТИЯ</a
><a href="index.html">ПЪТЕКИ</a
><a href="index.html">ФОРУМ</a
><a href="index.html">ВРЪЗКИ</a
><a class="active" href="index.html">ВХОД</a>
</nav>
<!--Section - Slideshow-->
<section class="sec1"></section>
<section class="content">
<div class="slider">
<figure>
<div class="slide">
<img src="img/slideshow1.jpg">
</div>
<div class="slide">
<img src="img/slideshow2.jpg">
</div>
<div class="slide">
<img src="img/slideshow3.jpg">
</div>
<div class="slide">
<img src="img/slideshow4.jpg">
</div>
<div class="slide">
<img src="img/slideshow5.jpg">
</div>
</figure>
</div>
</section>
<!--Section Welcome Video-->
<section class="Welcome">
<article id="video">
<video width="295" height="238" controls autopl>
<source src="video.mp4" type="video/mp4">
</video>
</article>
<aside id="welcometext">
<h2><center>Welcome</center></h2>
<center><p>Lamium (dead-nettles) is a genus of about 40–50 species of flowering plants in the family Lamiaceae,[3] of which it is the type genus. They are all herbaceous plants native to Europe, Asia, and northern Africa, but several have become very successful weeds of crop fields and are now widely naturalised across much of the temperate world.[2][4][5]</p></center>
</aside>
</section>
<!--Section News-->
<section class="News">
<article id="News1">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
</article>
<aside id="New">
<p> dsadas das </p>
</aside>
</section>
</div>
</body>
</html>

Adding a z-index rule to your nav element solved the problem on my end.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 0 100px;
transition: all 300ms;
z-index: 100;
}
Here is a little read on the subject

Give your header/nav a z-index:
nav {z-index:100}
Z-index positions your content in front-back space. The higher the value the closer to the front the element will be.

Put <h1> below <img> in <div>

I have a loading div that I display, and I want to have the text in the <h1> below the <img> and I can get it aligned in the middle horizontally, but I cant get it aligned below the <img> here is my HTML
<div id="loading">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
And my CSS
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
}
#loading-image {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
width:10%
}
#loading_text {
color:black;
text-align:center;
z-index: 101;
vertical-align:middle
}
And I have included a fiddle here: http://jsfiddle.net/myh5f13q/
So how can I get the <h1> centered horizontally and below the <img>?
Thanks

Remove all the positioning and give this way:
#loading {
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#loading-image {
width: 10%;
display: block;
margin: auto;
}
#loading_text {
color: black;
text-align: center;
z-index: 101;
vertical-align: middle
}
<div id="loading">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
Preview
Full Screen

I would wrap the content in another <div> and use CSS transform and position absolute to centre both vertically and horizontally.
Source: https://css-tricks.com/centering-css-complete-guide/
#loading {
position: relative;
}
#loading-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="loading">
<div id="loading-content">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
</div>

Add another container, and vertically center it within the #loading element.
http://jsfiddle.net/mblase75/gfv08q4z/
#loading {
width: 100%;
height: 100%;
left: 0px;
position: fixed;
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
}
#loading-container {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#loading-image {
display: block;
margin: auto;
width:10%
}
#loading_text {
color:black;
text-align:center;
z-index: 101;
vertical-align:middle
}
<div id="loading">
<div id="loading-container">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

How do I add a mouseover event to an image - javascript

Related

completely fit the toggle bar inside the div

Animated hamburger navigation

Using overlays on multiple images on one web page

MenuBar problems showing css html

Put <h1> below <img> in <div>

Categories

Resources