Hello I have a little problem with my background which is used on button::after element. Effect I would like to have it's background slide out from left to right's button side but it cover my whole text. I tried to use z-index but it doesn't work at all. Any ideas how to approach this problem?
body {
text-align: center;
}
button {
position: relative;
padding: 10px 25px;
font-size: 40px;
margin-top: 100px;
border: 2px solid black;
background-color: grey;
border-radius: 20px;
box-shadow: 0 0 0 2px white, 0 0 0 4px black;
overflow: hidden;
color: black;
transition: 0.25s 0.05s linear;
}
button::after {
content: "";
position: absolute;
width: 0;
height: 100%;
bottom: 0;
left: 0;
background-color: #000;
transition: 0.3s linear;
/* z-index: -1; */
}
button:hover::after {
width: 100%;
}
button:hover {
color: white;
}
<!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" />
<title>Document</title>
</head>
<body>
<button>button</button>
</body>
</html>
As you are using button::after to create the slide out effects on background, it will create a pseudo-element that is the last child of the button.
To solve the issue, we will need to make the button text appears on top of the pseudo-element by wrapping the button text in an extra <p> tag so that we can apply CSS style z-index: 1; to bring it to the top.
<button>
<p>button</p>
</button>
button > p {
margin: 0;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
Final code:
body {
text-align: center;
}
button {
position: relative;
padding: 10px 25px;
font-size: 40px;
margin-top: 100px;
border: 2px solid black;
background-color: grey;
border-radius: 20px;
box-shadow: 0 0 0 2px white, 0 0 0 4px black;
overflow: hidden;
color: black;
transition: 0.25s 0.05s linear;
}
button::after {
content: "";
position: absolute;
width: 0;
height: 100%;
bottom: 0;
left: 0;
background-color: #000;
transition: 0.3s linear;
}
button:hover::after {
width: 100%;
}
button:hover {
color: white;
}
/* Below are the newly added CSS styles, others are unchanged */
button > p {
margin: 0;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
<button>
<p>button</p>
</button>
It's much easier to use box-shadow. You can use the inset property and horizontal offset to give you the same effect and it's much less css.
HTML
<button>button</button>
css
button {
padding:0.5rem 2rem; border:2px solid black;
box-shadow: 0px 0 0 0 black inset
}
button:hover {
box-shadow: 200px 0 0 0 black inset;
transition: box-shadow 1s, color 1s;
color:white;
}
I've put an example here. Just tweak to suit your needs
body {
text-align: center;
}
button {
position: relative;
padding: 10px 25px;
font-size: 40px;
margin-top: 100px;
border: 2px solid black;
background-color: grey;
border-radius: 20px;
box-shadow: 0 0 0 2px white, 0 0 0 4px black;
overflow: hidden;
color: black;
transition: 0.25s 0.05s linear;
z-index: 2;
}
button:hover {
color: white;
}
button::after {
content: "";
position: absolute;
width: 0;
height: 100%;
bottom: 0;
left: 0;
color: white;
transition: 0.3s linear;
z-index: -1;
}
button:hover::after {
width: 100%;
background: #000;
}
<!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" />
<title>Document</title>
</head>
<body>
<button>button</button>
</body>
</html>
Is this like you wanted?
Related
So pretty much I want to show text on what each of these images are when I hover over it. When you hover over it it should blur the image so you can see the text better. I am pretty new to html and couldn't figure this out on my own. -----------------------------------------------------------------------------------------------------------------------------
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url('../Images/three.png') ;
width:100%;d
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
background-position: 0% 100%;
}
.coatofarms {
width: 5%;
z-index: 15;
position: absolute;
left: 0.5%;
top: -2%;
transition: all .1s ease-in-out;
}
.coatofarms:hover {
top: -1%;
transform: scale(1.0);
}
.topnav {
overflow: hidden;
background-color: #e1bc85;
position:absolute;
top: 0%;
width: 100%;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-left: 10%;
font-family: Bodoni Mt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #3a5063;
color: white;
}
table {
background-color:#3a5063;
width:100%;
position: absolute;
height: 1.5%;
top: 6.5%;
}
a.link:link {color:#000000;text-decoration:none;}
a.link:visited {color:#000000;text-decoration:none;}
a.link:hover {text-decoration:none;}
.giza {
transition: all .1s ease-in-out;
position: absolute;
top: 12%;
left:1%;
border-radius: 40%;
}
.giza:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.luxor {
transition: all .1s ease-in-out;
position: absolute;
top: 16.2%;
left: 40%;
border-radius: 40%;
}
.luxor:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.siwalandmark {
transition: all .1s ease-in-out;
position: absolute;
top: 10.4%;
right: 1%;
border-radius: 40%;
}
.siwalandmark:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.abu {
transition: all .1s ease-in-out;
position: absolute;
right: 1%;
top: 56%;
border-radius: 40%;
}
.abu:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.abydos {
transition: all .1s ease-in-out;
position: absolute;
top: 65%;
left: 40%;
border-radius: 40%;
}
.abydos:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease;
}
/*-----------------------------------------*/
.whitedesert {
transition: all .1s ease-in-out;
position: absolute;
top: 62%;
left: 1%;
border-radius: 40%;
}
.whitedesert:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease;
}
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;500&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landmarks</title>
<link rel="icon" href="Images/flag.png">
<link rel="stylesheet" href="CSS/landmarks.css">
</head>
<body>
<div class="coatofarms"><img src="Images/coabetter.png" class="coa" width="75px" z-index="2"></div>
<div class="topnav">
Food
Landmarks
Visit Us
</div>
<img src="Images/giza.jpg" width="25%" class="giza" >
<img src="Images/luxorstemple.jpg" width="25%" class="luxor" >
<img src="Images/siwa.png" width="25%" class="siwalandmark">
<img src="Images/abu.jpg" alt="simbel" width="25%" class="abu" >
<img src="Images/abydos.jpeg" width="25%" class="abydos">
<img src="Images/whitedesert.jpg" width="25%" class="whitedesert">
<!--Table-->
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</table>
</body>
</html>
There are several ways of doing it and you can do this clearly in pure CSS and HTML without Javascript.
First: blur image: (as seen in example in both images)
there is a CSS filter method filter: blur(5px);
That's it. Just as simple as that.
Second: add text with a Tooltip (as seen in the snippet on the first image)
You can just add the attribute title="tooltip text" and HTML includes a tooltip for you automatically with the text of the attribute. Hover with your cursor and wait a little
Third: make div with text visible on hover (as seen in snippet in second image)
you have to wrap the image and div tag into a sourrounding container and add CSS to it. So when you hover the container then you simply set the text-div to visible
.container {
position: relative;
text-align: center;
color: white;
width: 25%;
}
.blur_and_tooltop:hover {
filter: blur(5px);
-webkit-filter: blur(5px);
}
.text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
}
.container:hover .blur_and_visibility {
filter: blur(5px);
-webkit-filter: blur(5px);
}
.container:hover .text-box {
visibility: visible;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="https://picsum.photos/id/1/200" alt="blur_and_tooltop" width="25%"
title="Just a normal HTML5 tooltip. No CSS needed" class="blur_and_tooltop">
<div class="container">
<img src="https://picsum.photos/id/15/200" alt="advanced pure CSS and HTML" width="100%" class="blur_and_visibility">
<div class="text-box">
<h3>I am some fancy TEXT</h3>
</div>
</div>
</body>
</html>
There's a few different ways of doing this through things like CSS, javascript/jQuery, or utilizing built in functions of a third party extension such as Bootstrap. The quickest would be to show the title attribute on hover.
Example HTML
<img src="https://cdn.theatlantic.com/media/mt/science/cat_caviar.jpg" title="Cat Caviar" />
I have seen some solutions but they actually affect the design intended.
Is there any way to stop this flicker without altering the design?
I understand that the problem is that While hovering over a moving (or animated) element, it may just un-hover from the element because it moves beneath my cursor.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #FFEE32;
}
.button {
box-shadow: -10px 10px;
background-color: #FFEE32;
border: 3px solid;
display: inline-block;
cursor: pointer;
color: #202020;
font-size: 30px;
font-weight: bold;
padding: 20px 30px;
transition: all 0.15s linear 0s;
text-decoration: none;
position: relative;
box-sizing: border-box;
}
.button:hover {
top: 3px;
transition: all 0.15s linear 0s;
left: -3px;
color: #FFEE32;
background-color: #202020;
border: #FFEE32;
box-shadow: 0px 0px 0 #ffe800 !important;
position: relative;
}
</style>
</head>
<body>
<h2>Animated Button - "Pressed Effect"</h2>
<div class="see">
<button class="button">Click Me</button>
</div>
</body>
</html>
check it out here, try to hover on edges from right and bottom
I would add an ::after pseudo element on your .button:hover, that will be slightly bigger than your actual button's area. As a result while you're hovering, the pseudo element will 'jump' under the cursor, that will prevent flickering - .button will not escape from your mouse :)
The below addition is not the perfect solution, but can be a working solution for your problem
.button:hover:after {
content: '';
position: absolute;
left: 0;
top: 0;
margin-left:10px;
margin-top:-10px;
height: 130%;
width: 110%;
/*border: 3px solid blue;*/
box-sizing: border-box;
padding:10px;
}
Please note, by uncommenting the border: 3px solid blue rule you'll see the actual position and size of the pseudo element on hover.
because of border size & top,left position button is "flickering" when hover on corner side.
Add "3px" in border & remove "top & left" position.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #FFEE32;
}
.button {
box-shadow: -10px 10px;
background-color: #FFEE32;
border: 3px solid;
display: inline-block;
cursor: pointer;
color: #202020;
font-size: 30px;
font-weight: bold;
padding: 20px 30px;
transition: all 0.15s linear 0s;
text-decoration: none;
position: relative;
box-sizing: border-box;
}
.button:hover {
top: 0px;
transition: all 0.15s linear 0s;
left: 0px;
color: #FFEE32;
background-color: #202020;
border:3px solid #FFEE32;
box-shadow: 0px 0px 0 #ffe800 !important;
position: relative;
}
</style>
</head>
<body>
<h2>Animated Button - "Pressed Effect"</h2>
<div class="see">
<button class="button">Click Me</button>
</div>
</body>
</html>
I'm having trouble with setting a transition, At the moment it goes from top to bottom (It's a border that shows when you hover). I'd like the transition to start from the middle and to spread to the side or at least to start from any side and to spread to the other...
My navigation menu anchors are using the navigation-link class !
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
transition: left 2s, all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
border-bottom: 3px solid DarkGreen;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
So if you know a way to make it work it would be very much appreciated
You may consider a pseudo-element to create the border. First you set 50% in left/right property and on hover you switch to 0 both and this will create the effect you want:
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
position: relative;
}
.navigation-link:before {
content: "";
position: absolute;
height: 3px;
bottom: 0;
left: 50%;
right:50%;
background:DarkGreen;
transition: all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover::before,.navigation-link.active:before {
left: 0;
right:0;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
<a href="#" class="navigation-link active" >Accueil</a>
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can use a pseudoelement instead of border.
To make it start from the middle, set left or right at 50% and give the pseudoelement a width of 0. On transition just increase the width to 50% and it will grow in that direction.
Adjust the left or right setting from 50% to 0, and increase the width to make it span the entire link.
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
transition: left 2s, all ease-in-out 300ms;
position: relative;
}
.navigation-link:after {
content: '';
position: absolute;
left: 50%;
width: 0;
bottom: 0;
height: 2px;
background: darkgreen;
transition: width 300ms ease-in-out;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover:after {
width: 50%;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can achieve this by using :after or :before pseudo elements and by adding transform and transition property to it.
.navigation-box{
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
a.navigation-link{
position: relative;
color: #000;
text-decoration: none;
}
a.navigation-link:hover {
color: #000;
}
a.navigation-link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a.navigation-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>
i don't understand why the div which is lower in zindex keep blocking the div which have higher zindex :
This is my simple html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>game</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style>
body {
background-color: lightblue;
}
html, body, canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
#startMenuWrapper {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
overflow: hidden;
}
#startMenuWrapper {
z-index: 2;
}
#gameAreaWrapper {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
#playerNameInput {
width: 200px;
text-align: center;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
box-sizing: border-box;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 10px;
outline: none;
}
#startButton, #spectateButton {
position: relative;
margin: auto;
margin-top: 10px;
width: 200px;
height: 40px;
box-sizing: border-box;
font-size: large;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #2ecc71;
border: 0;
border-bottom: 2px solid #28be68;
cursor: pointer;
margin-bottom: 10px;
}
#spectateButton:active, #spectateButton:hover,
#startButton:active, #startButton:hover {
top: 1px;
background: #55D88B;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
</style>
</head>
<body>
<div id="gameAreaWrapper">
<canvas tabindex="1" id="cvs"></canvas>
</div>
<div id="startMenuWrapper">
<input type="text" tabindex="0" autofocus placeholder="Enter alphanumeric characters" id="playerNameInput" maxlength="25" /></br>
<button id="startButton">Play</button></a>
<br />
</div>
</body>
</html>
why is the "playerNameInput" input box is blocked ?
z-index requires a position other than the default static. It will have no effect if you don't set the property to one of the following: relative | absolute | fixed
body {
background-color: lightblue;
}
html,
body,
canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
-webkit-user-select: none;
/* webkit (safari, chrome) browsers */
-moz-user-select: none;
/* mozilla browsers */
-khtml-user-select: none;
/* webkit (konqueror) browsers */
-ms-user-select: none;
/* IE10+ */
}
#startMenuWrapper {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
overflow: hidden;
}
#startMenuWrapper {
z-index: 2;
position: relative;
}
#gameAreaWrapper {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
#playerNameInput {
width: 200px;
text-align: center;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
box-sizing: border-box;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 10px;
outline: none;
}
#startButton,
#spectateButton {
position: relative;
margin: auto;
margin-top: 10px;
width: 200px;
height: 40px;
box-sizing: border-box;
font-size: large;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #2ecc71;
border: 0;
border-bottom: 2px solid #28be68;
cursor: pointer;
margin-bottom: 10px;
}
#spectateButton:active,
#spectateButton:hover,
#startButton:active,
#startButton:hover {
top: 1px;
background: #55D88B;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
<div id="gameAreaWrapper">
<canvas tabindex="1" id="cvs"></canvas>
</div>
<div id="startMenuWrapper">
<input type="text" tabindex="0" autofocus placeholder="Enter alphanumeric characters" id="playerNameInput" maxlength="25" />
</br>
<button id="startButton">Play</button>
</a>
<br />
</div>
In order z-index to be applyed in this case playerNameInput should have position:relative and some z-index value
Whenever I open the modal it appears perfectly fine, but when I click on number "2", which is the second photo in the gallery inside the modal, it closes. How do I choose 2 (or any other number) without closing the modal?
This is my code:
/* SLIDER CSS */
#images {
width: 400px;
height: 250px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#images img {
width: 400px;
height: 250px;
position: absolute;
top: 0;
left: -400px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#images img:target {
left: 0;
z-index: 9;
opacity: 1;
}
#images img:first-child {
left: 0;
}
#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #C6E4F2;
}
/* MODAL CSS */
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
See more
<div id="openJunior" class="modalDialog">
<div>
X
<div id="images">
<img id="image1" src="http://lorempixel.com/400/250/people" />
<img id="image2" src="http://lorempixel.com/400/250/sports" />
<img id="image3" src="http://lorempixel.com/400/250/nature" />
<img id="image4" src="http://lorempixel.com/400/250/abstract" />
<img id="image5" src="http://lorempixel.com/400/250/animals" />
</div>
<div id="slider">
1
2
3
4
5
</div>
</div>
</div>
You can try using event.stopPropagation, for example like this:
$('.modalDialog').on('click', function(event){
event.stopPropagation();
});
jQuery API stopPropagation
For further comments you should consider adding the javascript you are using to your post.