Overlay on an image with a name - image

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>

Related

label focus not working when the input is non required and if i am using [required] css its working but return initial place

can anyone help me? in below that is my code, in that label focus not working when the phone number input field without required. if am using [required] in css its working when i click the input the label going top but its again returns down to the initial value and the label overlapping the given input
Document
#welcome-form {
flex-direction: column;
position: absolute;
height: 220px;
width: 100%;
background-color: white;
border-top-left-radius: 200px 102px;
bottom: 48px;
}
.welcome-form-item {
position: relative;
border-bottom: 2px solid #adadad;
margin: 20px 0;
width: 80%;
margin-left: 50px;
width: 80%;
}
.welcome-form-item-textbox {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.welcome-form-item label {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}
.welcome-form-item span::before {
content: '';
background-color: #303041;
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
transition: .5s;
}
.welcome-form-item-textbox:focus\~label,
.welcome-form-item-textbox\[required\]:valid\~label {
top: -5px;
color: #adadad;
}
.welcome-form-item-textbox:focus\~span::before,
.welcome-form-item-textbox\[required\]:valid\~span::before {
width: 100%;
}
#welcome-form-item-button {
color: #ffffff;
vertical-align: bottom;
border: 0;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
font-weight: bold;
font-size: .75rem;
line-height: 2;
border-radius: 2px 60px;
display: block;
width: 80%;
cursor: pointer;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
font-size: 19px;
margin-left: 50px;
margin-top: 20px;
text-spacing: .5;
}
#welcome-form-item-button:hover {
background-color: #303041;
box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 10%);
}
<div class="welcome-form-item">
<input class="welcome-form-item-textbox" type="text" id="name" name="name" required>
<span></span>
<label for="name">Name</label>
</div>
<div class="welcome-form-item">
<input class="welcome-form-item-textbox" type="text" id="phone_number" name="phone_number">
<span></span>
<label for="phone_number">Phone Number</label>
</div>
<div>
<button id="welcome-form-item-button" type="button">Start
Conversation</button>
</div>
</form>
`this is my output`
enter image description here

How to align an image to the right in a div with other elements

I have a div with inline a few items but the item on the right is an image which must be align right in that div.
html
<div class='row'>
<div class='col-md-12'>
<div class='bank_tribune_speler' data-spelerid='77'>
<div class='positie'>K</div>
<img src='img/clubs/shirt.png' class='bank_tribune_shirt' alt='shirt'>
<div class='bank_tribune_naam_info'>
<span class='ellipsis font-weight-bold club_margin_top'>Name</span>
</div>
<div class='bank_tribune_wissel'>
<div class='bank_tribune_wissel_icon'></div>
</div>
</div>
</div>
</div>
css
.bank_tribune_speler {
display: flex;
padding-top: 8px;
padding-left: 10px;
border: solid 1px #b5b5b5;
margin-top: 10px;
}
.bank_tribune_shirt {
height: 50px;
width: 50px;
margin-left: 12px;
margin-top: -5px;
}
.positie {
color: #fff;
font-size: 22px;
font-weight: 700;
height: 40px;
line-height: 40px;
position: relative;
text-align: center;
width: 40px;
}
.bank_tribune_naam_info {
font-size: 20px;
line-height: 22px;
margin-left: 10px;
margin-top: -3px;
}
.bank_tribune_wissel_icon {
background: url("../img/wissel4.jpg");
height: 40px;
margin-right: 15px;
width: 48px;
}
See JSFiddle
I want the image with the red and green arrow to align right in the div with the grey border
I have tried float: right, text-align: right but so far no luck .... :-(
Any idea how to achieve this?
Kind regards,
Arie
I have achieved it by using float: right .... ;-)
See JSFiddle
body {
font-family: 'Hind', sans-serif;
}
.bank_tribune_speler {
padding-top: 8px;
padding-left: 10px;
border: solid 1px #b5b5b5;
margin-top: 10px;
height: 50px;
}
.bank_tribune_shirt {
height: 50px;
width: 50px;
margin-left: 12px;
margin-top: -5px;
float: left;
}
.positie {
color: #fff;
font-size: 22px;
font-weight: 700;
height: 40px;
line-height: 40px;
position: relative;
text-align: center;
width: 40px;
float: left;
}
.linie-positie-keeper {
background-color: red;
}
.bank_tribune_naam_info {
font-size: 20px;
line-height: 22px;
margin-left: 10px;
margin-top: -3px;
float: left;
}
.club_margin_top {
margin-top: 0.8rem!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.bank_tribune_wissel {
height: 40px;
width: 40px;
margin-right: 15px;
}
.float-right {
float: right!important;
}

How to fix height in div with overflow scroll

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

Dropdown menu hidden behind slideshow container?

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.

How to use images instead of text labels

How to use images instead of text labels?
I need the menu to slide down when the .logo (bird) image button is clicked
How can I link text label with a logo image on the menu bar?
PS: the menu slides down when the .logo (bird) is clicked BUT there are two birds, I need the menu to slide down when the bird image sitting on the menu is clicked, AND yes I need only one bird image
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
.row-basic {
max-width: 1216px;
}
html,
body {
text-align:justify
color: #fff;
font-size: 19px;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
/* ------------------------------------------ */
/* HEADER */
/* ------------------------------------------ */
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display:flex;
justify-content: space-between;
}
/* ----- NAVIGATION -----*/
nav {
display:flex;
align-items: center;
}
nav ul {
display:flex;
}
.user-tools {
display:flex;
align-items: center;
}
.user-tools :focus {
outline:none;
}
/* ----- LOGO -----*/
.logo {
position: relative;
cursor: pointer;
height: 68px;
width: auto;
margin-right: 21px;
margin-left: 31px;
z-index: 1;
}
/* ----- MENU BUTTON -----*/
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
/* ------------------------------------------ */
/* PAGE CONTENT TOP BAR */
/* ------------------------------------------ */
.box1 {
height: 26px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 26px;
width: 300px;
background: #b14242;
}
.box3 {
height: 26px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: all 0.3s ease-in-out 0s;
position:relative;
margin-top: -260px;
z-index: 0; }
.toggle {
transition: all 0.3s ease-in-out 0s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -225px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.topbar {
display:flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out 0s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.topbar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.topbar li:hover {
color: rgba(255, 255, 255,1); }
#topbartoggler {
display: none; }
#topbartoggler:checked + .page-wrap .topbar {
top: -4px; }
#topbartoggler:checked + .page-wrap .toggle {
top: -5px; }
#topbartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<body>
<input type="checkbox" id="topbartoggler" name="" value="">
<div class="page-wrap">
<div class="topbar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<header class="row-basic">
<nav>
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
</nav>
<div class="user-tools">
<div class="toggle"></div>
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>
OK So I have found out all I needed to do was to replace
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
with
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
JSFiddle https://jsfiddle.net/heumnzLe/4/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
.row-basic {
max-width: 1216px;
}
html,
body {
text-align:justify
color: #fff;
font-size: 19px;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display:flex;
justify-content: space-between;
}
nav {
display:flex;
align-items: center;
}
nav ul {
display:flex;
}
.user-tools {
display:flex;
align-items: center;
}
.user-tools :focus {
outline:none;
}
.logo {
position: relative;
cursor: pointer;
height: 68px;
width: auto;
margin-right: 21px;
margin-left: 31px;
z-index: 1;
}
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
.box1 {
height: 26px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 26px;
width: 300px;
background: #b14242;
}
.box3 {
height: 26px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: all 0.3s ease-in-out 0s;
position:relative;
margin-top: -260px;
z-index: 0; }
.toggle {
transition: all 0.3s ease-in-out 0s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -225px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.topbar {
display:flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out 0s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.topbar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.topbar li:hover {
color: rgba(255, 255, 255,1); }
#topbartoggler {
display: none; }
#topbartoggler:checked + .page-wrap .topbar {
top: -4px; }
#topbartoggler:checked + .page-wrap .toggle {
top: -5px; }
#topbartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<body>
<input type="checkbox" id="topbartoggler" name="" value="">
<div class="page-wrap">
<div class="topbar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<header class="row-basic">
<nav>
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
</nav>
<div class="user-tools">
<div class="toggle"></div>
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>

Resources