We have a main index page with a dropdown menu and slide show, and the z-index works fine, but in our other pages, we removed the slideshow and left the dropdown menu. But for some reason in the pages without the slideshow, the dropdown menu gets hidden behind the container the slideshow used to be, despite the removal of all slideshow HTML. This leads me to believe it is a CSS issue.
Any suggestions would be well appreciated!
Here's the HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stigler Public Schools</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="\\stigler-web\web\New Website\caleab\stiglerstylesheet.css"/>
</head>
<body>
<img class="logo" src="sps_logo.png" alt="Stigler Public Schools">
<p class="header">Stigler Public Schools</p>
<div class="nav">
<ul class="navigation">
<a class="main" href="#url">District</a>
<li class="n1">High School</li>
<li class="n2">Middle School</li>
<li class="n3">Grade School</li>
<li class="n4">Administration</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Resources</a>
<li class="n1">School Calender</li>
<li class="n2">Menus</li>
<li class="n3">Employment</li>
<li class="n4">Counseling</li>
<li class="n5">Grade Book</li>
<li class="n6">Yearbook</li>
</ul>
</td>
<ul class="navigation">
<a class="main" href="#url">Organizations</a>
<li class="n1">Athletics</li>
<li class="n2">Music</li>
<li class="n3">Drama</li>
<li class="n4">FFA</li>
<li class="n5">A-Z</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Board Of Education</a>
<li class="n1">Information</li>
<li class="n2">Meetings</li>
<li class="n3">Policies</li>
</ul>
</div>
</body>
</html>
And Here's the CSS
* {
margin: 0px;
padding: 0px;
outline: none;
border: 0px;
}
body {
background-image: url(background.png);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
margin: 0px auto;
padding: 0px;
width: 100%;
overflow: hidden;
}
h1 {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
color: #e60000;
font-family: century gothic;
text-align: center;
color: #FF000;
}
h2 {
font-family: century gothic;
}
h3 {
font-family: century gothic;
}
h5 {
font-family: californian fb;
font-szie: 1.15em;
}
p {
border-top: none;
border-left: none;
border-bottom: none;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
table#sitelinks td {
font-size: 1.15em;
}
table#sitelinks tr:nth-child(odd) {
background-color: #fff
}
table tr:nth-child(even) {
background-color: #fff
}
table tr:nth-child(odd) {
background-color: #eee
}
hr {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
th {
text-align: left;
font-family: century gothic;
padding: 10px 0px 0px 0px;
font-size: 1.15em;
}
td {
font-family: century gothic;
border: 1px solid black;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 1em;
}
.center {
text-align: center;
}
.blue {
color: blue;
}
.bottomborder {
text-align: center;
border-bottom: 5px groove red;
}
a:link {
color: #e60000;
text-decoration: none
}
a:visited {
color: #e60000;
text-decoration: none
}
a:hover {
color: #e60000;
text-decoration: none
}
a:active {
color: #e60000;
text-decoration: none
}
.logo {
display: block;
margin: 0 auto;
height: 160px;
width: 160px;
}
.header {
padding-left: 140px
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
.navwrapper {}
.nav {
width: 79.31%;
text-align: center;
margin: 0px auto;
z-index: 2;
position: relative;
}
a:hover {
color: #FF0000;
}
/* NAVIGATION */
.navigation {
list-style: none;
margin: 0;
padding: 0;
height: 40px;
margin: 10px auto;
background: #FF0000;
float: left;
position: relative;
z-index: 10
}
.navigation,
.navigation a.main {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
-moz-border-radius: 0px 0px 0 0;
}
.navigation a.main {
display: inline-block;
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.navigation:hover a.main {
color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.04);
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 30;
overflow: visible;
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.3s;
-o-transition: 0.2s linear 0.3s;
transition: 0.2s linear 0.3s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.1s;
-o-transition: 0.2s linear 0.1s;
transition: 0.2s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n4 {
transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n6 {
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s
}
/* End Navigation */
/*Slideshow */
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none;
overflow: hidden;
}
.slideshowimg {
min-width: 100%;
max-width: 100%;
max-height: none;
border: 2px solid #ffffff
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
min-width: 1000px;
min-height: 500px;
max-height: 500px;
position: fixed;
margin: 0px auto;
clear: both;
z-index: 1;
position: relative;
overflow: hidden;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 30px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
/* End Slideshow */
I fixed this on my own. I realized that since there was no more content under the drop-down menu, the page technically ended, hence the disappearing menu. At least that's my conclusion. After adding the intended content to the page, they worked just fine.
Related
I have the below code, where the loading animation is not working in IOS devices
I have used transform: rotate which is not working on IOS but they are working fine on android devices
any reason why this code is not working, I have tried various ways mentioned on the StackOverflow but still they are not working
body{
background: blueviolet;
}
.loading-steps {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 300px;
margin: 40px auto 0 auto;
}
.load-animation {
transition: all 450ms;
}
ol, ul {
list-style: none;
}
.loading-steps li {
margin-bottom: 15px;
display: flex;
position: relative;
height: 21px;
font-size: 13px;
color: black;
font-weight: 400;
}
.box {
position: absolute;
margin-bottom: 0.25em;
vertical-align: top;
transition: 0.3s color, 0.3s border, 0.3s transform, 0.3s opacity;
margin-right: 0;
left: -3px;
margin-top: -4px;
}
.loading {
border: 3px solid #4D86C8;
border-top-color: #FFDD51;
border-radius: 50%;
-webkit-animation: 1s webkit-loading linear;
animation: 1s loading linear;
animation-iteration-count: initial;
position: relative;
display: inline-block;
width: 1.5em;
height: 1.5em;
color: inherit;
vertical-align: middle;
pointer-events: none;
position: relative;
display: flex;
justify-content: center;
margin: 0px auto;
-o-animation-fill-mode: both;
opacity: 0;
transition: .5s;
}
.loading {
border: 3px solid #4d86c8;
border-top-color: #ffdd51;
border-radius: 50%;
-webkit-animation: 1s webkit-loading linear;
animation: 1s loading linear;
animation-iteration-count: initial;
position: relative;
display: inline-block;
width: 1.5em;
height: 1.5em;
color: inherit;
vertical-align: middle;
pointer-events: none;
position: relative;
display: flex;
justify-content: center;
margin: 0px auto;
-o-animation-fill-mode: both;
opacity: 0;
transition: 0.5s;
}
.loading:before {
content: "";
display: block;
width: inherit;
height: inherit;
position: absolute;
top: -0.4em;
left: -0.4em;
border-radius: 50%;
opacity: 0.5;
}
#-webkit-keyframes webkit-loading {
0% {
-webkit-transform: rotate(0deg);
-webkit-opacity: 1;
}
50% {
-webkit-transform: rotate(360deg);
-webkit-opacity: 1;
}
90% {
-webkit-transform: rotate(360deg);
-webkit-opacity: 1;
}
100% {
-webkit-transform: rotate(360deg);
-webkit-opacity: 0;
-webkit-transform: scale(0);
}
}
#keyframes loading {
0% {
transform: rotate(0deg);
opacity: 1;
}
50% {
transform: rotate(360deg);
opacity: 1;
}
90% {
transform: rotate(360deg);
opacity: 1;
}
100% {
transform: rotate(360deg);
opacity: 0;
transform: scale(0);
}
}
.loading:before {
content: '';
display: block;
width: inherit;
height: inherit;
position: absolute;
top: -0.4em;
left: -0.4em;
border-radius: 50%;
opacity: 0.5;
}
li svg {
width: 15px;
margin-right: 8px;
margin-top: -6px;
}
<body>
<div class="loading-steps load-animation">
<ul>
<li>
<div class="box">
<div class="loading" style="animation-delay: 2s;"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve"><polyline class="path" fill="none" points="20,6 9,17 4,12" stroke="#FFDD51" stroke-miterlimit="10" stroke-width="3" style="animation-delay: 2s;"></polyline></svg>
</li>
<li>
<div class="box">
<div class="loading" style="animation-delay: 2.5s;"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve"><polyline class="path" fill="none" points="20,6 9,17 4,12" stroke="#FFDD51" stroke-miterlimit="10" stroke-width="3" style="animation-delay: 2.5s;"></polyline></svg>
</li>
</ul>
</div>
</body>
I just copies this code from a tutorial, But I try to open sub menu it disappears. I don't know what to do Please help me.
#nav_wrapper1 {
width: 100%;
}
.nav_wrapper {
border-bottom:1px solid white;
left: 0;
top:0;
position:top;
width: 100%;
transition: top .5s ease-out;
background: #170030;
height:60px;
z-index:99999;
}
.btn {
padding: 10px 1%;
margin: 5px;
color: #fff;
text-decoration: none;
font-family: normal;
transition: all 0.1s ease;
}
.btn:hover {
transition: all 0.1s ease;
}
#search i {color: #fff;
font-size: 22px;}
#search {
float: right;
font-size: 22px;
padding: 20px 25px;
line-height: 0px;
color: #fff;
margin: 0;
font-weight: 700;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#search:hover {
background: #111;
}
.search_box {
clear: both;
width: 40%;
background: #111;
padding: 0;
margin: 0;
height: 0;
overflow: hidden;
transition: all 0.1s ease-in-out;
float:right;
z-index:99999999999;
}
.search_box.active {
height: auto;
padding: 10px 0;
width:40%;
}
.search_box input {
width: 60%;
font-size: 13px;
margin: 0 0 0 10px;
padding: 10px;
border: none;
background: #fff;
}
.search_box input:focus {
outline: none;
}
.search_box input.search_icon {
clear: both;
width: 30%;
height: auto;
padding: 10px;
margin: 0;
margin-right:10px;
border: none;
color: #fff;
cursor: pointer;
background: #6a00de;
opacity: 1;
transition: all 0.1s ease;
float:right;
}
.search_box input.search_icon:hover {
background: #FFF;
color:#111;
}
.menu-link {
display: none;
}
.spinner-master input[type=checkbox] {
display: none;
}
.menu {
width: 100%;
height: auto;
background: #170030;
color:#170030;
transition: all 0.3s ease;
margin-top:5px;
}
.menu ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: inline-block;
}
.menu > li > ul.sub_menu {
min-width: 10em;
padding: 4px 0;
background-color: #111;
border: 1px solid #fff;
}
.menu ul li {
padding: 0px;
}
.menu > ul > li {
display: inline-block;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #fff;
font-size: 18px;
height:100%;
}
.menu ul li a:hover {
background: #111;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #FFF;
}
.menu ul li > a {
padding: 15px;
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul ul > li {
position: relative;
}
.menu ul ul > li a {
padding: 10px 15px;
height: auto;
background: #000000;
}
.menu ul ul > li a:hover {
background: #111;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
#media all and (max-width: 860px) {
.example-header .container {
width: 100%;
}
#search {
color: #fff;
padding: 0px 20px 0px 5px;
margin-top:25px;
}
.spinner-master * {
transition: all 0.3s;
box-sizing: border-box;
}
.spinner-master {
position: relative;
margin: 15px;
height: 30px;
width: 30px;
float: left;
}
.spinner-master label {
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 5px;
left: 0;
}
.spinner-master .spinner {
position: absolute;
height: 4px;
width: 100%;
padding: 0;
background-color: #fff;
}
.spinner-master .diagonal.part-1 {
position: relative;
float: left;
}
.spinner-master .horizontal {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master .diagonal.part-2 {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {
opacity: 0;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-top: 10px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-top: -12px;
}
a.menu-link {
display: block;
color: #fff;
float: left;
text-decoration: none;
padding: 10px 16px;
font-size: 1.5em;
}
a.menu-link:hover {
color: #efa666;
}
a.menu-link:after {
content: “2630”;
font-weight: normal;
}
a.menu-link.active:after {
content: “2715”;
}
.menu {
clear: both;
min-width: inherit;
float: none;
top:0px;
position:relative;
}
.menu, .menu > ul ul {
overflow: hidden;
max-height: 0;
background-color: #39484d;
}
.menu > li > ul.sub-menu {
padding: 0px;
border: none
}
.menu.active, .menu > ul ul.active {
max-height: 55em;
}
.menu ul {
display: inline;
}
.menu li, .menu > ul > li {
display: block;
}
.menu > ul > li:last-of-type a {
border: none;
}
.menu li a {
color: #fff;
display: block;
padding: 0.8em;
position: relative;
}
.menu li.has-submenu > a:after {`
content: ‘+’;
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.55em 0.5em;
}
.menu li.has-submenu > a.active:after {
content: “-“;
}
.menu ul ul > li a {
background:#170030;
padding: 10px 18px 10px 30px;
border-bottom: 1px solid #111;
}
.menu ul li a:hover {
background: #4b5f65;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #fff;
}
.menu ul ul, .menu ul ul ul {
display: inherit;
position: relative;
left: auto;
top: auto;
border: none;
}
.search_box.active {
position: absolute;
top: 63px;
z-index: 10;
width:70%;
right:2px;
}
.search_box input {
width: 50%;
float:left;
}
.search_box input.search_icon {
width: 30%;
float:right;
margin-right:14px;
margin-top:-37px;
}
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
delete display: none
.menu ul ul {
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
or change to display:block;
.menu ul ul {
display:block;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
try it..
I can't apply fixed height with scroll. When I fixed height container blow up all div's height. How can I fixed height div? Fixed tree items in container. I made fix container height '200px' but it doesn't work. Maybe there is something simple but I can't see.
Here's my simple code:
<div class="container-Atanan">
<div class="container-Atanan-Header">
<i class="fas fa-american-sign-language-interpreting fa-2x"></i>
<div class="container-Atanan-Header-Title"><span>Başlık</span></div>
</div>
<div class="container-Atanan-ListItem">
<a class="listItem" href="#">
<div class="container-Atanan-ListItem-Avatar">
<img src="https://cdn.vuetifyjs.com/images/lists/1.jpg" alt="">
</div>
<div class="container-Atanan-ListItem-Content">
<div class="Content-Title">Lorem ipsum.</div>
<div class="Content-Subtitle">
<span>Lorem ipsum dolor sit. <span class="italic">-25.2.2019</span></span>
<span class="italic oldline">Lorem ipsum dolor sit amet. </span>
</div>
</div>
</a>
</div>
and my scss:
.container-Atanan {
box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
display: flex;
flex-direction: column;
box-sizing: border-box;
// background-color : #7AD3B1;
width: 470px;
height: 80%;
overflow: auto;
padding-bottom : 30px;
font-family: 'Roboto', sans-serif;
&-Header {
display: inline-flex;
background-color: #e2e2e2;
height: 50px;
align-items: center;
&-Title{
padding:15px;
}
}
&-ListItem{
display: inline-flex;
.listItem{
display: inline-flex;
width: 100%;
height: 72px;
text-decoration: none;
color:black;
padding: 15px 15px;
}
&-Avatar {
margin-right: 10px;
display: inline-flex;
align-items: center;
img{
border-radius: 50%;
width: 40px;
height: auto;
}
}
&-Content {
display: inline-flex;
padding-right: 30px;
flex-direction: column;
justify-content: center;
padding-left:10px;
width: 362px;
height: 72px;
box-shadow: 0 8px 6px -20px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
transition: background-color 0.5s ease-out;
.Content-Title{
font-weight: 500;
}
.Content-Subtitle {
font-weight: 300;
display: inline-flex;
flex-direction: column;
.italic{
font-weight : lighter;
font-style: italic;
font-size :1em;
}
.oldline{
text-decoration:line-through;
}
}
&:hover{
background: rgba(0,0,0,0.05)
}
}
}
.divider{
display: block;
margin-left: 72px;
border: solid;
border-width: thin 0 0 0;
margin-left: 0;
margin-right: 0;
margin-bottom : 0;
&-Light{
border-color: rgba(0,0,0,0.12);
}
}
}
and my fiddle
Use this instead
display:grid;
grid-template-columns :max-content max-content;
In &-header and remove inline-flex from &-ListItem and you can set the height in .container-Atanan to any value you want
body{
background-color:#FEFCFC;
}
.container-Atanan {
box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
display: flex;
flex-direction: column;
box-sizing: border-box;
// background-color : #7AD3B1;
width: 470px;
height:350px;
overflow: auto;
padding-bottom : 30px;
font-family: 'Roboto', sans-serif;
&-Header {
display:grid;
grid-template-columns :max-content max-content;
background-color: #e2e2e2;
height: 50px;
align-items: center;
&-Title{
padding:15px;
}
}
&-ListItem{
.listItem{
display: inline-flex;
width: 100%;
height: 72px;
text-decoration: none;
color:black;
padding: 15px 15px;
}
&-Avatar {
margin-right: 10px;
display: inline-flex;
align-items: center;
img{
border-radius: 50%;
width: 40px;
height: auto;
}
}
&-Content {
display: inline-flex;
padding-right: 30px;
flex-direction: column;
justify-content: center;
padding-left:10px;
width: 362px;
height: 72px;
box-shadow: 0 8px 6px -20px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
transition: background-color 0.5s ease-out;
.Content-Title{
font-weight: 500;
}
.Content-Subtitle {
font-weight: 300;
display: inline-flex;
flex-direction: column;
.italic{
font-weight : lighter;
font-style: italic;
font-size :1em;
}
.oldline{
text-decoration:line-through;
}
}
&:hover{
background: rgba(0,0,0,0.05)
}
}
}
.divider{
display: block;
margin-left: 72px;
border: solid;
border-width: thin 0 0 0;
margin-left: 0;
margin-right: 0;
margin-bottom : 0;
&-Light{
border-color: rgba(0,0,0,0.12);
}
}
}
JSFIDDLE
I am trying to get an overlay over some images I have tried so many ways and I can't seem to get it over the image. The overlay either goes above or below, but won't go over the image. any help would be awesome!
Here is my code:
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
margin-bottom: 15px;
width: 200px;
height: 150px;
}
.box {
width: 200px;
height: 150px;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
I have added some element and style, that .box position to absolute.
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
width: 200px;
height: 150px;
}
.picture-wrapper {
position:relative;
overflow:hidden;
}
.box {
position:absolute;
top:0;left:0;
width: 100%;
height: 100%;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
width:100%;height:100%;
}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults" class="picture-wrapper">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
Your question in confusing but As much as I understood you want to show text or another image on image hover
Here is the code:
If it's not what meant tell me.
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(75,75,75,0.7);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(48, 152, 157, 0.4);
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
margin: -52px 0 0 0;
padding: 62px 100px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
<div style="width:350px; height:200px;">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
here is my JsFiddle: JsFiddle
i want to know why my image/image caption overlap's my website banner? I'm pretty sure its something to do with my absolute positioning but I'm not 100% sure! I'm trying to have the image/image caption right under the banner. I don't want to position it with px/cm/in because it may be different across screen sizes!
Html:
<!doctype html>
<title>Untitled Document</title>
<body>
<div class="banner"><img src="http://i.imgur.com/7m4rahc.jpg" alt="Loading..."/></div>
<div id="mainwrapper">
<div id="box-3" class="box">
<img id="image-3" src="http://i.imgur.com/NEZfdM7.jpg"/>
<span class="caption fade-caption">
<h3>Click To Subscribe</h3>
<center>
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="AfterlifeGamingHD" data-layout="full" data-count="default"></div>
</center>
</span>
</div>
</div>
</body>
CSS:
charset "utf-8";
/* CSS Document */
body {
background-image: url(http://i.imgur.com/2MVANTR.jpg);
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
img, .banner {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
width: 370px;
height: 470px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
position: absolute;
left: 0;
width: 370px;
height: 470px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
opacity: 0;
width: 370px;
height: 470px;
text-align: left;
padding: 15px;
}
#mainwrapper .box:hover .fade-caption {
opacity: 1;
}
position:absolute removes an element from the document flow, allowing other elements to take up the freed space. There seems to be no real reason for you using position: absolute, so just remove it...
#box-3{
position:relative;
top:500px;(set this to what you want it)
}
http://jsfiddle.net/J35sf/5/
You could just position it to where ever you want it. :)