We Keep Coding

Menu-link only works on index.html and no other page

For some reason my menu link doesn't work on any other page except for the index page. I think its a problem within JavaScript but I'm not quite sure. The HTML navigation section of the page not working is the exact same as the code for index.html. Here is the CSS
.list-menu {
position: fixed;
visibility: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999999;
background: rgba(0, 0, 0, 0.9);
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
opacity: 0;
z-index: -1;
}
.list-menu.reveal-modal {
opacity: 1;
z-index: 999999;
visibility: visible;
}
.list-menu .ion-close-round {
font-size: 31px;
position: absolute;
top: 32px;
right: 32px;
color: #fff;
cursor: pointer;
}
.circle {
width: 45px;
height: 45px;
text-align: center;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
border-radius: 50%;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
cursor: pointer;
z-index:99 ;
padding: 0px 0 0;
}
.circle i {
font-size: 36px;
color: #111112;
}
.circle.dark {
border-color: #292929;
}
.circle.dark:before {
border-color: transparent transparent transparent #292929;
}
.circle.large {
height: 120px;
width: 120px;
margin-top: -60px;
margin-left: -60px;
}
.circle.large:before {
margin-top: -18px;
margin-left: -10px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 31.0px;
border-color: transparent transparent transparent #ffffff;
}
.circle.large.dark:before {
border-color: transparent transparent transparent #292929;
}
.circle.inline {
position: relative;
top: 0;
left: 0;
margin-top: 0;
margin-left: 0;
display: inline-block;
z-index: 0;
}
#media all and (max-width: 1000px) {
.circle.large {
width: 90px;
height: 90px;
margin-top: -45px
;
}
.circle.large:before {
margin-top: -14px;
margin-left: -8px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 25.0px;
border-color: transparent transparent transparent #fff;
}
}
and the JavaScript.
$(document).ready(function(){
"use strict";
$('.menu-container').each(function(index) {
$(this).find('.circle').attr('menu-link', index);
$(this).find('.list-menu').clone().appendTo('body').attr('menu-link', index);
});
$('.menu-container .circle').click(function() {
var linkedVideo = $('section').closest('body').find('.list-menu[menu-link="' + $(this).attr('menu-link') + '"]');
linkedVideo.toggleClass('reveal-modal');
});
$('section').closest('body').find('.close-iframe').click(function() {
$(this).closest('.list-menu').toggleClass('reveal-modal');
});
Here is what the popup is supposed to look like. https://imgur.com/a/pyq9zis
I've been trying to fix for a while but can't seem to find a fix.
Here is also the html for both index.html and hotelam.html
First index
<!-- Navigation section ()
================================================== -->
<div class="nav-container">
<nav class="nav-inner transparent">
<div class="navbar">
<div class="container">
<div class="row">
<div class="brand">
<a href="home.html">
<img src="images/Logo4.png" ></a>
</a>
</div>
<div class="navicon">
<div class="menu-container">
<div class="circle dark inline">
<i class="icon ion-navicon"></i>
</div>
<div class="list-menu">
<i class="icon ion-close-round close-iframe"></i>
<div class="intro-inner">
<ul id="nav-menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
Second Hotelam.html
<!-- Navigation section
================================================== -->
<div class="nav-container">
<nav class="nav-inner transparent">
<div class="navbar">
<div class="color9">
<div class="container">
<div class="row">
<div class="brand2">
<a href="home.html">
<img src="images/brandl.png" ></a>
</a>
</div>
<div class="navicon">
<div class="menu-container">
<div class="circle dark inline">
<i class="icon ion-navicon"></i>
</div>
<div class="list-menu">
<i class="icon ion-close-round close-iframe"></i>
<div class="intro-inner">
<ul id="nav-menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>

CSS Responsive absolute div inside relative div

I'm relatively new to CSS and I'm trying to build a prototype where I have a big Div with several divs inside in an specific position. I want these div's to always occupy that spot but I want it to be responsive.
My code is kinda all over the place after trying several diferent things but the yellow div is what I'm trying to make. I want to place all the other divs in a circular way but want them to always use % of the parent div's space and shrink but keep the same "relative" position to the parent.
var openSide = false;
function side() {
if (!openSide) {
document.getElementById("main").style.marginLeft = "15%";
document.getElementById("main").style.paddingLeft = "10px";
document.getElementById("mySidebar").style.width = "15%";
document.getElementById("mySidebar").style.display = "block";
// document.getElementById("openNav").style.display = 'none
openSide = true;
} else {
document.getElementById("main").style.marginLeft = "0%";
document.getElementById("mySidebar").style.display = "none";
document.getElementById("openNav").style.display = "inline-block";
openSide = false;
}
console.log(openSide);
}
/* The sidebar menu */
.sidenav {
/*/height: 100%; /* Full-height: remove this if you want "auto" height */
width: 15%;
/* Set the width of the sidebar */
position: fixed;
/* Fixed Sidebar (stay in place on scroll) */
z-index: 1;
/* Stay on top */
top: 70;
/* Stay at the top */
left: 0;
background-color: #111;
/* Black */
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 20px;
display: none;
margin-left: 10px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style page content */
#main {
margin-left: 0%;
/* Same as the width of the sidebar */
margin-right: 15%;
padding-left: 10px;
padding-right: 20px;
}
body {
margin-left: 10px;
}
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: red;
margin: 10px;
padding: 20px;
font-size: 30px;
}
#map {
/*padding: 100px 100px 100px 100px;*/
position: relative;
width: 100%;
height: 600px;
top: 100px;
background: yellow;
}
.media {
position: absolute;
width: 11.07%;
height: 16.66%;
background-color: red;
}
.media:first-child {
margin-top: 15;
}
#m1 {
background: blue;
left: 400px;
top: 400px;
}
.media:hover {
background-color: pink;
z-index: 1000;
width: 200px;
height: 200px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/css.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="side()">☰</button>
<div id="header">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Side navigation -->
<div class="sidenav" id="mySidebar">
About
Services
Clients
Contact
</div>
<div id="main">
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div id="map">
<div class="container">
<div class="media" style="left:465px;top:340px; background:red;">h</div>
<div class="media" style="left:530px;top:250px; background:blue;">g</div>
<div class="media" style="left:465px;top:175px;background:green ">f</div>
<div class="media" style="left:400px;top:100px;background:red">e</div>
<div class="media" style="left:335px;top:175px; background:blue">d</div>
<div class="media" style="left:270px;top:250px; background:green;">c</div>
<div class="media" style="left:335px;top:325px;">b</div>
<div class="media" id="m1">a</div>
</div>
</div>
<div class='circle-container'>
<a href='#' class='center'><img src='image.jpg'></a>
<a href='#' class='deg0'><img src='image.jpg'></a>
<a href='#' class='deg45'><img src='image.jpg'></a>
<a href='#' class='deg135'><img src='image.jpg'></a>
<a href='#' class='deg180'><img src='image.jpg'></a>
<a href='#' class='deg225'><img src='image.jpg'></a>
<a href='#' class='deg315'><img src='image.jpg'></a>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Footer</p>
</div>
</div>

As other commenters have noted, using % for both the positioning and the dimensions of the contained elements is a good approach here.
You can also use vmin to establish the width and height of the .container, to ensure that whether the viewport is decreased horizontally or vertically, it remains visible in its entirety.
Working Example:
.container {
position: relative;
width: 100vmin;
height: 100vmin;
background-color: yellow;
}
.container div {
position: absolute;
width: 6%;
height: 9%;
transform: translateX(-50%);
}
.a {
top: 60%;
left: 50%;
background-color: blue;
}
.b {
top: 52%;
left: 40%;
background-color: red;
}
.c {
top: 44%;
left: 30%;
background-color: green;
}
.d {
top: 36%;
left: 40%;
background-color: blue;
}
.e {
top: 28%;
left: 50%;
background-color: red;
}
.f {
top: 36%;
left: 60%;
background-color: green;
}
.g {
top: 44%;
left: 70%;
background-color: blue;
}
.h {
top: 52%;
left: 60%;
background-color: red;
}
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
</div>

Sliding divs only when clicking on buttons within the divs

I'm trying to use JQuery to slide a div with some content to the left and make the one from the right appear in the place of the previous one.
I already made it work but the thing is, it only works when I click on the div (box) that contains all the content.
I want to change that so it only changes when I click on the buttons within those divs (boxes).
Take a look at this: https://jsfiddle.net/Msiric/g8Lne34o/1/
So what I want to do is this:
$(document).ready(function () {
$('.buttons').click(function() {
$('.box').animate({
left: '-125%'
}, 500, function() {
$('.box').css('left', '150%');
$('.box').appendTo('#inputform');
});
$('.box').next().animate({
left: '25%'
}, 500);
});
});
Notice the $('.buttons).onclick instead of $('.box').onclick.
When I do this the code doesn't work as expected.
Thanks

You need to bind the event to buttons and animate the boxes using $(this).closest(".box")
Demo
$(document).ready(function() {
$('.buttons').click(function() {
$(this).closest(".box").animate({
left: '-125%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#inputform');
});
$(this).closest(".box").next().animate({
left: '25%'
}, 500);
});
});
#inputform {
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
height: 100px;
overflow: hidden;
}
.box {
position: absolute;
width: 100%;
height: 100px;
line-height: 300px;
font-size: 50px;
text-align: center;
left: 25%;
margin-left: -25%;
}
#box1 {
background-color: #333;
}
#box2 {
background-color: #333;
left: 150%;
}
#box3 {
background-color: #333;
left: 150%;
}
#box4 {
background-color: #333;
left: 150%;
}
#box5 {
background-color: #333;
left: 150%;
}
#requestbox {
width: 75%;
height: 25px;
display: block;
float: left;
margin-left: 3.1%;
border-radius: 5px;
font-size: medium;
line-height: 25px;
font-weight: bold;
transition: all 0.3s ease;
font-family: "Helvetica";
resize: none;
}
#requestbox:focus {
height: 100px;
}
.forms {
width: 75%;
height: 25px;
display: block;
float: left;
margin-left: 3.1%;
border-radius: 5px;
font-size: medium;
line-height: 25px;
font-weight: bold;
transition: all 0.3s ease;
font-family: "Helvetica";
resize: none;
}
.buttons {
display: block;
width: 18%;
height: 31px;
background: linear-gradient(rgb(70, 42, 24), rgb(244, 117, 33));
border-radius: 5px;
font-size: medium;
line-height: 15px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputform">
<div id="box1" class="box">
<textarea placeholder="Some text" id="requestbox" class="forms"></textarea>
<button id="next" class="buttons">Next</button>
</div>
<div id="box2" class="box">
<textarea placeholder="Some text" id="setbox" class="forms"></textarea>
<button id="set" class="buttons">Set</button>
</div>
<div id="box3" class="box">
<textarea placeholder="Some text" id="attachbox" class="forms"></textarea>
<button id="attach" class="buttons">Attach</button>
</div>
<div id="box4" class="box">
<textarea placeholder="Some text" id="confirmbox" class="forms"></textarea>
<button id="confirm" class="buttons">Confirm</button>
</div>
<div id="box5" class="box">
<textarea placeholder="Some text" id="publishbox" class="forms"></textarea>
<button id="publish" class="buttons">Publish</button>
</div>
</div>

change like this, add the event listener to the button fiddle
$(document).ready(function () {
$('.buttons').click(function() {
var $box = $(this).closest('.box');
$box.animate({
left: '-125%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#inputform');
});
$box.next().animate({
left: '25%'
}, 500);
});
});

Did you try using the bootstrap?
<div class="row" "><!-- Sliding image row -->
<div class="col-xs-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators"><!-- Indicators -->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol><!-- /Indicators -->
<div class="carousel-inner"><!-- Wrapper -->
<div class="item active" ><!-- item1 -->
<img src="images/slide1.jpg" style="width:100%"/>
<div class="carousel-caption">
</div>
</div><!-- /item1 -->
<div class="item"><!-- item2 -->
<img src="images/slide2.jpg" style="width:100%" />
<div class="carousel-caption">
</div>
</div><!-- /item2 -->
</div><!-- /Wrapper -->
<!-- Left and right controls -->
<a class="left carousel-control " href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /mycarousel -->
</div><!-- /col-xs-12 -->
</div><!-- /Sliding image row -->
you can put your button instead of the part that puts an arrow for the next slide.

fix show hide panle in scroll page

I design show/hide panel using bootstrap like this:
HTML:
$(function() {
$("#hamburgerMenu, .backdrop, .sideBarCloseIcon").click(function() {
$("#mySideBar").toggleClass("sidebar-nav-togled");
$(".backdrop").toggle();
});
$(".list-group-item").click(function() {
$(".list-group-item").removeClass("active");
$(this).addClass("active");
});
});
.content {
height: 1000px;
}
.sidebar-nav-togled {
margin-left: 0px;
}
.sidebar-nav {
margin-left: -250px;
width: 250px;
z-index: 10001;
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
height: 100vh;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background-color: #fafafa;
border-right: 1px solid #ccc;
}
.sidebar-nav-togled {
margin-left: 0px;
}
.sideBarCloseIcon {
float: right;
cursor: pointer;
}
.backdrop {
height: 100vh;
width: 100%;
z-index: 10000;
position: fixed;
top: 0;
left: 0;
display: none;
background-color: #000;
opacity: 0.2;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav .list-group-item {
background-color: transparent;
border: 0px;
cursor: pointer;
}
.sidebar-nav .list-group {
margin-left: -15px;
margin-right: -15px;
}
.sidebar-nav .list-group hr {
margin-top: 0px;
margin-bottom: 0px;
}
.list-group-item-icon {
padding-right: 5px;
}
#hamburgerMenu {
cursor: pointer;
}
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
background-color: #337ab7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default" role="navigation" style="margin-bottom: -20px">
<div class="container-fluid">
<div class="navbar-header">
<a id="hamburgerMenu" class="navbar-brand"><span
class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></a>
<a class="navbar-brand">Slide Panel</a>
</div>
</div>
<!--/.container-fluid -->
</div>
<div class="backdrop"></div>
<div id="mySideBar" class="sidebar-nav container-fluid" aria-label="...">
<div class="row">
<div class="col-xs-12" style="padding: 5px 15px 1px 15px">
<h4 style="padding-left: 0px; font-size: 19px; color: #666">
WorkPanel <span
class="sideBarCloseIcon glyphicon glyphicon-remove"
aria-hidden="true"></span>
</h4>
</div>
</div>
<hr style="margin: 5px -15px" />
<ul class="list-group">
<li class="list-group-item"><span class="list-group-item-icon glyphicon glyphicon-home" aria-hidden="true"></span>Home</li>
<li class="list-group-item"><span class="list-group-item-icon glyphicon glyphicon-user" aria-hidden="true"></span>My Profile
</li>
<li class="list-group-item"><span class="badge">2</span>
<i class="fa fa-newspaper-o list-group-item-icon"></i>News</li>
<hr />
<li class="list-group-item">
<i class="fa fa-question list-group-item-icon"></i>
<span class="badge">2</span> Forum</li>
<li class="list-group-item">
<i class="fa fa-users list-group-item-icon"></i>
<span class="badge">2</span> Teams</li>
</ul>
<hr style="margin: 5px -15px" />
<form class="form-inline">
<div class="form-group" style="width: 181px">
<label for="exampleInputName2">Search Here</label>
<input type="text" class="form-control" id="exampleInputName2" style="width: 100%" placeholder="Enter Text Here">
</div>
<button style="margin-top: 24px; padding: 9px;" type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
<hr style="margin: 5px -15px" />
<div>
<strong>Need Help ? Contact Us</strong>
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-envelope list-group-item-icon"></i>Mail</li>
<li class="list-group-item"><i class="fa fa-phone list-group-item-icon"></i>Phone</li>
</ul>
</div>
</div>
<div class="content">
######
</div>
Now In Action work for me But when I Scroll page My Panel in scroll move to top. I need to fix my panel to top in scroll. how do fix This problem?
$(function() {
$("#hamburgerMenu, .backdrop, .sideBarCloseIcon").click(function() {
$("#mySideBar").toggleClass("sidebar-nav-togled");
$(".backdrop").toggle();
});
$(".list-group-item").click(function() {
$(".list-group-item").removeClass("active");
$(this).addClass("active");
});
});
Demo : https://jsfiddle.net/9m7m756a/

You can use fixed positioning just like:
#mySideBar {
position: fixed;
}
Or checkout this Fiddle.
Hope this helps!

How to slideToggle() on hover?

I'm pretty new with jQuery, and I'm doing fine with basics, but still can't figure out some things with advance use.
This is my example
jQuery('.hp-single-service a').hover(function() {
jQuery('.above-content').slideToggle("slow", function() {
jQuery('.above-content').css({
"height": "20%",
"bottom": "0"
});
jQuery('.above-content-inner').css("padding-top", "2%");
});
});
.hp-single-service {
float: left;
width: 50%;
height: 388px;
border: 4px solid #f3a12b;
overflow: hidden;
position: relative;
border-bottom: 0;
}
.above-content {
position: absolute;
z-index: 1;
left: 0;
right: 0;
background-color: #73214a;
opacity: 0.9;
filter: alpha(opacity=90);
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
I'm trying to create jQuery that will on hover toggle .above-content div to height:20%; bottom:0; and give padding-top:2%; to .above-content-inner div.
For start I'm not sure that slideToggle() is right function for this, so if anyone have better suggestion I'm open for it, just to make this work.

You can even do the same with CSS 3 transitions. Please refer to the following link https://jsfiddle.net/osha90/4kyLgat1/
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
CSS CODE
.hp-single-service {
float: left;
width: 50%;
height: 388px;
border: 4px solid #f3a12b;
overflow: hidden;
position: relative;
border-bottom: 0;
}
.above-content {
position: absolute;
z-index: 1;
left: 0;
right: 0;
background-color: #73214a;
opacity: 0.9;
filter: alpha(opacity=90);
height: 100%;
width: 100%;
bottom: 0%;
transition: all 1s ease-out;
}
.hp-single-service a:hover .above-content{
height: 20%;
bottom: 0%;
}
.hp-single-service a:hover .above-content-inner{
padding-top: 2%;
transition: all 1s ease-out;
}

I believe you're looking for something like this:
jQuery('.hp-single-service a').hover(function() {
jQuery(this).find('.above-content').animate({
"height": "20%",
"bottom": "0"
});
jQuery(this).find('.above-content-inner').css("padding-top", "2%");
},
function() {
jQuery(this).find('.above-content').animate({
"height": "100%",
"bottom": "auto"
});
jQuery(this).find('.above-content-inner').css("padding-top", "0");
});
.hp-single-service {
float: left;
width: 50%;
height: 388px;
border: 4px solid #f3a12b;
overflow: hidden;
position: relative;
border-bottom: 0;
}
.above-content {
position: absolute;
z-index: 1;
left: 0;
right: 0;
background-color: #73214a;
opacity: 0.9;
filter: alpha(opacity=90);
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
Don't forget that .hover() takes two callback functions as parameters - the first one is the mouseover and the second one is the mouseout.