I try to position div on another div.
when i hover on .lg-each-contest the .current-caption will appear.
when hover on .time the .current-caption hover will be same.
Here is my code
.lg-current-inner {
border: 1px solid #bdbdbd;
margin-bottom: 30px;
position: relative;
}
.lg-each-contest:hover .current-caption {
opacity: 1;
}
.lg-current-banner .amount {
position: absolute;
top: 5px;
background-color: #fea700;
padding: 5px 12px;
font-size: 22px;
right: 0;
font-weight: 600;
color: #fff;
}
.lg-current-content {
padding: 10px;
}
.lg-current-content h3 {
font-size: 24px;
line-height: 36px;
margin-top: 10px;
}
.time {
border-top: 1px solid #bdbdbd;
position: relative;
}
.time .remaning-time {
padding: 10px;
}
.time .remaning-time .each-time {
font-size: 14px;
font-weight: 500;
}
.time .remaning-time .submissions {
padding: 2px 10px;
background: #1bcd80;
font-weight: 500;
color: #fff;
border-radius: 2px;
}
.current-caption {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
right: 0;
bottom: 0;
padding: 25% 0;
width: 100%;
height: 100%;
background-color: rgba(63, 97, 132, 0.5);
text-align: center;
font-size: 15px;
opacity: 0;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.current-caption button {
color: #fea700;
padding: 6px 20px;
opacity: 1;
border-radius: 4px;
background: #fff;
font-weight: 600;
font-size: 16px;
position: relative;
top: 50%;
outline-color: transparent;
border: none;
}
.current-caption button:hover {
border-color: transparent;
border: none;
}
.current-caption button:focus {
border-color: transparent;
border: none;
}
.current-caption button .fa {
margin-right: 5px;
}
.seclected {
display: none;
}
<div class="lg-current-inner">
<div class="lg-each-contest">
<div class="lg-current-banner">
<img src="assets/images/gl-1.jpg" alt="" class="img-responsive">
<span class="amount">$130</span>
</div>
<div class="lg-current-content">
<h3>Logo Name here</h3>
<p>We are looking for a clean logol company strickt.</p>
</div>
<div class="current-caption">
<button class="select-btn">
<span class="select">Select</span>
<span class="seclected select">Selected</span>
</button>
</div>
</div>
<div class="time">
<div class="remaning-time">
<span class="each-time"> 25 Days 13 Hours 00 min</span>
<span class="pull-right submissions" data-toggle="tooltip" data-placement="top" title="Submissions" data-toggle="tooltip" data-placement="top" title="Submissions">344</span>
</div>
</div>
</div>
check demo: http://codepen.io/anon/pen/MpoMad?editors=1100
thanks in advance.
I hope this is what you are looking for. Add a z-index for your div this will avoid that text from appearing on the hover div, as well as the padding seems to be unwanted I have removed that too.
<!DOCTYPE html>
<html>
<head>
<style>
.lg-current-inner {
border: 1px solid #bdbdbd;
margin-bottom: 30px;
position: relative;
}
.lg-each-contest {
overflow: hidden;
position: relative;
}
.lg-each-contest:hover .current-caption {
opacity: 1;
}
.lg-current-banner .amount {
position: absolute;
top: 5px;
background-color: #fea700;
padding: 5px 12px;
font-size: 22px;
right: 0;
font-weight: 600;
color: #fff;
}
.lg-current-content {
padding: 10px;
}
.lg-current-content h3 {
font-size: 24px;
line-height: 36px;
margin-top: 10px;
}
.time {
border-top: 1px solid #bdbdbd;
position: relative;
}
.time .remaning-time {
padding: 10px;
}
.time .remaning-time .each-time {
font-size: 14px;
font-weight: 500;
}
.time .remaning-time .submissions {
padding: 2px 10px;
background: #1bcd80;
font-weight: 500;
color: #fff;
border-radius: 2px;
}
.current-caption {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
right: 0;
bottom: 0;
/*padding: 25% 0;*/
z-index: 10000;
width: 100%;
height: 100%;
background-color: rgba(63, 97, 132, 0.5);
text-align: center;
font-size: 15px;
opacity: 0;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.current-caption button {
color: #fea700;
padding: 6px 20px;
opacity: 1;
border-radius: 4px;
background: #fff;
font-weight: 600;
font-size: 16px;
position: relative;
top: 50%;
outline-color: transparent;
border: none;
}
.current-caption button:hover {
border-color: transparent;
border: none;
}
.current-caption button:focus {
border-color: transparent;
border: none;
}
.current-caption button .fa {
margin-right: 5px;
}
.seclected {
display: none;
}
</style>
</head>
<body>
<div class="col-sm-3 wow fadeInRight" data-wow-delay="0.2s">
<div class="lg-current-inner">
<div class="lg-each-contest">
<div class="lg-current-banner">
<img src="assets/images/gl-1.jpg" alt="" class="img-responsive">
<span class="amount">$130</span>
</div>
<div class="lg-current-content">
<h3>Logo Name here</h3>
<p>We are looking for a clean logo that pops apparel company strickt.</p>
</div>
<div class="current-caption">
<button class="select-btn">
<span class="select">Select</span>
<span class="seclected select"><i class="fa fa-check-circle"></i>Selected</span>
</button>
</div>
</div>
<div class="time">
<div class="remaning-time">
<span class="each-time"><i class="fa fa-calendar"></i> 25 Days 13 Hours 00 min</span>
<span class="pull-right submissions" data-toggle="tooltip" data-placement="top" title="Submissions" data-toggle="tooltip" data-placement="top" title="Submissions">344</span>
</div>
</div>
</div>
</div>
</body>
</html>
Modifications.
Set overflow: hidden and position: relative for the lg-each-contest class. This will stops the overflow of the hovering div. I have updated the code.
I have no idea about what you are asking. But when I run the code I saw the cursor is not showing the pointer on the button. I just add some code to your CSS file.
.current-caption button {
+ cursor: pointer;
}
.current-caption button:hover {
+ background: #000;
}
.current-caption must be on top while .lg-each-contest is hovering only
.lg-current-inner {
border: 1px solid #bdbdbd;
margin-bottom: 30px;
position: relative;
}
.lg-each-contest:hover .current-caption {
opacity: 1;
z-index:2; /* added */
}
.lg-current-banner .amount {
position: absolute;
top: 5px;
background-color: #fea700;
padding: 5px 12px;
font-size: 22px;
right: 0;
font-weight: 600;
color: #fff;
}
.lg-current-content {
padding: 10px;
}
.lg-current-content h3 {
font-size: 24px;
line-height: 36px;
margin-top: 10px;
}
.time {
border-top: 1px solid #bdbdbd;
position: relative;
}
.time .remaning-time {
padding: 10px;
}
.time .remaning-time .each-time {
font-size: 14px;
font-weight: 500;
}
.time .remaning-time .submissions {
padding: 2px 10px;
background: #1bcd80;
font-weight: 500;
color: #fff;
border-radius: 2px;
}
.current-caption {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
right: 0;
bottom: 0;
/*padding: 25% 0;*/ /* removed */
width: 100%;
height: 100%;
background-color: rgba(63, 97, 132, 0.5);
text-align: center;
font-size: 15px;
opacity: 0;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.current-caption button {
color: #fea700;
padding: 6px 20px;
opacity: 1;
border-radius: 4px;
background: #fff;
font-weight: 600;
font-size: 16px;
position: relative;
top: 50%;
outline-color: transparent;
border: none;
}
.current-caption button:hover {
border-color: transparent;
border: none;
}
.current-caption button:focus {
border-color: transparent;
border: none;
}
.current-caption button .fa {
margin-right: 5px;
}
.seclected {
display: none;
}
<div class="lg-current-inner">
<div class="lg-each-contest">
<div class="lg-current-banner">
<img src="assets/images/gl-1.jpg" alt="" class="img-responsive">
<span class="amount">$130</span>
</div>
<div class="lg-current-content">
<h3>Logo Name here</h3>
<p>We are looking for a clean logol company strickt.</p>
</div>
<div class="current-caption">
<button class="select-btn">
<span class="select">Select</span>
<span class="seclected select">Selected</span>
</button>
</div>
</div>
<div class="time">
<div class="remaning-time">
<span class="each-time"> 25 Days 13 Hours 00 min</span>
<span class="pull-right submissions" data-toggle="tooltip" data-placement="top" title="Submissions" data-toggle="tooltip" data-placement="top" title="Submissions">344</span>
</div>
</div>
</div>
here just added z-index
.lg-each-contest:hover .current-caption {
++ z-index:2;
}
removed padding to fit container
.current-caption {
-- padding: 25% 0;
}
Related
So, if i would click "PROJECTEN", it would allegedly bring me to the PROJECTEN page, but instead it just does the animation that i asked it to.
That is the html, now for the CSS of the Home page:
body{
background-color: black;
}
.projectenknop{
position: relative;
border-radius: 0 50px 0 50px;
border: 1px solid white;
font-family: "Bebas Neue";
font-size: 2vw;
color: #ffffff;
margin: 10% 0 0 25%;
width: 10vw;
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
background-color: transparent;
}
.projectenknop:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition-duration: 0.8s;
}
.projectenknop:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
.overknop {
position: relative;
border-radius: 50px 0 50px 0;
border: 1px solid white;
font-family: "Bebas Neue";
font-size: 2vw;
color: #ffffff;
margin: 10% 0 0 50%;
width: 10vw;
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
background-color: transparent;
}
.overknop:after {
content: "";
background: #f1f1f1;
display: block;
right: 0;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition-duration: 0.8s;
}
.overknop:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
#tekstkader{
border: 0.1px solid black;
width: 29.5vw;
height: 180vh;
margin: 13.4% 0 0 35.5%;
text-align: center;
font-family: "Bebas Neue";
color: black;
opacity: 0.7;
font-size: 1.5vw;
}
#linkprojecten:link{
color: azure;
text-decoration: none;
}
#linkprojecten:visited{
color: azure;
text-decoration: none;
}
#linkprojecten:hover{
color: azure;
text-decoration: none;
}
#linkprojecten:active{
color: azure;
text-decoration: none;
}
<div class="rij">
<div class="kol-6 kol-t-6 kol-m-6">
<button class="projectenknop"><a id="linkprojecten" href="projecten.html">PROJECTEN</a></button>
</div>
<div class="kol-6 kol-t-6 kol-m-6">
<button class="overknop">OVER</button>
</div>
</div>
<div id="tekstkader">
<br>Dit is een fanpagina over Alicha De Bevere,<br>een grafische studente in Ter Sterre.
</div>
And now the PROJECTEN HTML and CSS:
body{
background-color: black;
}
.homeknop {
position: relative;
border-radius: 0 50px 0 50px;
border: 1px solid white;
font-family: "Bebas Neue";
font-size: 2vw;
color: #ffffff;
margin: 10% 0 0 25%;
width: 10vw;
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
background-color: transparent;
}
.homeknop:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
transition-duration: 0.8s;
opacity: 0;
}
.homeknop:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
.overknop {
position: relative;
border-radius: 50px 0 50px 0;
border: 1px solid white;
font-family: "Bebas Neue";
font-size: 2vw;
color: #ffffff;
margin: 10% 0 0 50%;
width: 10vw;
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
background-color: transparent;
}
.overknop:after {
content: "";
background: #f1f1f1;
display: block;
right: 0;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition-duration: 0.8s;
}
.overknop:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
#linkhome:link{
color: azure;
text-decoration: none;
}
#linkhome:visited{
color: azure;
text-decoration: none;
}
#linkhome:hover{
color: azure;
text-decoration: none;
}
#linkhome:active{
color: azure;
text-decoration: none;
}
<video autoplay muted loop id="bgvideo">
<source src="BGVIDEOPROJECTEN.mp4" type="video/mp4">
</video>
<div class="rij">
<div class="kol-6 kol-t-6 kol-m-6">
<button class="homeknop"><a id="linkhome" href="index.html">HOME</a></button>
</div>
<div class="kol-6 kol-t-6 kol-m-6">
<button class="overknop">OVER</button>
</div>
</div>
So yeah, cant figure it out.
And also i wanted to make the button do the animation after i hover, but it just doesnt work. It gets buggy and is all over the place.
Try switching the order of the link and button, i.e. putting the <button> inside of the <a> instead.
I want that when a user comes and tries to type text in "input" the label goes up, and if they leave that area blank it comes back to the original position. If user typed something over there it will stay up there.
I tried this code with input box with required it is working fine, but when I try to do this with input and add some content in input the label coming back down it need to be stay up there.
div{
margin-top:40px;
}
.btn-add input[type="text"]{
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
.btn-add input:focus ~ .floating-label{
top: -20px;
bottom: 10px;
left: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float{
position: relative;
}
<div class="form-float btn-add">
<input type="text" class="inputText" placeholder="" >
<label class="floating-label" >Button text</label>
</div>
I remove input:not(:focus):valid~.floating-label so it can work with not required field
Try this code since because of placeholder happening.
.form-group {
position: relative;
margin-bottom: 1.5rem;
}
input + .form-control-placeholder {
position: absolute;
transition: all 200ms;
top: -20px;
bottom: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
input:placeholder-shown + .form-control-placeholder {
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-control:focus + .form-control-placeholder {
position: absolute;
transition: all 200ms;
top: -20px;
bottom: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
input[type="text"]{
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
label{
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
<br>
<br>
<div class="form-group">
<input type="text" class="form-control" placeholder=" " >
<label class="form-control-placeholder">Button text</label>
</div>
Add Space to you placeholder by default and after that use input:not(:placeholder-shown) property to check if input is empty or not. Here working example of your code
div{
margin-top:40px;
}
.btn-add input[type="text"]{
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
.btn-add input:focus ~ .floating-label{
top: -20px;
bottom: 10px;
left: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
.btn-add input:not(:placeholder-shown) ~ .floating-label{
top: -20px;
bottom: 10px;
left: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float{
position: relative;
}
<div class="form-float btn-add">
<input type="text" class="inputText" placeholder=" " >
<label class="floating-label" >Button text</label>
</div>
Since :placeholder-shown only works with placeholder text shown (no empty string) you could use visibility.
div {
margin-top:40px;
}
.btn-add input[type="text"] {
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: -20px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float input:placeholder-shown ~ label {
top: 0;
visibility: hidden;
}
.form-float {
position: relative;
}
<div class="form-float btn-add">
<input type="text" placeholder="Button Label" >
<label class="floating-label">Button Label</label>
</div>
These are two solutions. I think they need some adjustment because probably they are not correct.
Solution #1: Floating label on focus
.custom-form-input {
display: block;
width: 100%;
height:32px;
padding: 1rem .55rem .065rem .55rem;
font-weight: 400;
border: 1px solid #cad3d6;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
background-color: #fafafa;
font-size: 0.79em;
color:#000000;
border-radius: 2px;
font-family: Arial, Helvetica, sans-serif;
}
.custom-form-input:focus,
.custom-form-input:active {
color: #212529;
background-color: #fff;
border-color: #585d61;
outline: 0;
}
.custom-form-floating {
position:relative;
}
.custom-form-floating-label {
position:absolute;
color: #9aa0a9;
font-size: 0.85em;
height:100%;
width:100%;
top: 0px;
display:flex;
align-items: center;
padding: 0 .55rem 0 .55rem;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
user-select: none;
pointer-events: none
}
.custom-form-input:focus ~ label,
.custom-form-input:valid ~ label {
font-size: 0.65rem;
height:55%;
}
.wrapper {
width:150px;
}
<div class="custom-form-floating">
<input id="test" class="custom-form-input" aria-label="usuario o correo electrónico" required=true aria-required="true"/>
<label for="test" class="custom-form-floating-label">Example 1</label>
</div>
<div class="wrapper">
<div class="custom-form-floating">
<input id="test" class="custom-form-input" aria-label="usuario o correo electrónico" required=true aria-required="true"/>
<label for="test" class="custom-form-floating-label">Example 2</label>
</div>
</div>
Solution #2: Floating label when type a letter
.custom-form-input {
display: block;
width: 100%;
height: 5px;
font-weight: 400;
border: 1px solid #cad3d6;
transition: border-color .15s ease-in-out;
background-color: #fafafa;
font-size: 1.2em;
color: #000000;
padding: 1rem .50rem 1rem .50rem;
border-radius: 2px;
font-family: Arial, Helvetica, sans-serif;
}
.custom-form-input:focus,
.custom-form-input:active {
color: #212529;
background-color: #fff;
border-color: #585d61;
outline: 0;
}
.custom-form-floating {
position: relative;
}
.custom-form-floating-label {
position: absolute;
color: #9aa0a9;
font-size: 0.85em;
height: 100%;
width: 100%;
top: 0px;
display: flex;
align-items: center;
padding: 0 .55rem 0 .55rem;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
user-select: none;
pointer-events: none
}
.custom-form-input:valid {
padding: 1.50rem .50rem .50rem .50rem;
font-size: 0.79em;
}
.custom-form-input:valid~label {
font-size: 0.65rem;
height: 55%;
}
.wrapper {
width:250px;
}
<div class="wrapper">
<div class="custom-form-floating">
<input id="test" class="custom-form-input"
aria-label="usuario o correo electrónico" required=true aria-required="true"/>
<label for="test" class="custom-form-floating-label">Correo electrónico o
usuario</label>
</div>
</div>
I am trying to show an overlay for full page when button on click. I intended to add an iframe in the content div for pop up. Here is my HTML:
And CSS to show and hide the overlay:
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
<div style="height: 1200px;">
<div class="box">
<a class="button" href="#popup1">Show Overlay</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
Content
</div>
</div>
</div>
</div>
My jsfiddle
However, there is a slight issue with the styling. The overlay does not cover the part below when scrolling down. It only covers the part before start scrolling down. I tried to set the height to 100% but to no futile.
Any ideas how to fix this?
Thanks!
Use position: fixed; instead of position: absolute;. position absolute set an auto height based on window height not body.
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
<div style="height: 1200px;">
<div class="box">
<a class="button" href="#popup1">Show Overlay</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
Content
</div>
</div>
</div>
</div>
I am unsure of what I am doing wrong trying to get a transparent overlay to appear over an image on hover. Initially, I attempted a javascript approach, but that didn't work, so I figured I would try a more light-weight css approach.
Does anyone see why this is not working?
.section2-box {
display: inline-block;
width: 50%;
height: 50%;
border-bottom: 4px solid #FFF;
border-right: 4px solid #FFF;
box-sizing: border-box;
position: relative;
}
.fadeHover {
transition: all .35s ease;
-webkit-transition: all .35s ease;
transition-delay: 0.10s;
-webkit-transition-delay: 0.10s;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
}
.fadeHover:hover .overlay {
background-color: rgba(0, 0, 0, 0.6);
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
position: absolute;
cursor: pointer;
}
.fadeHover-title {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 1.3rem;
color: #FFF;
display: none;
}
.fadeHover-title.activeHover {
opacity: 1;
}
.fadeHover-description {
font-size: 1.1rem;
color: #FFF;
font-family: 'Open Sans', sans-serif;
display: none;
}
.fadeHover-description.activeHover {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="section2-box fadehover" id="section2box3">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg">
<div class="overlay">
<h2 class="fadeHover-title">Option 1</h2>
<h3 class="fadeHover-description">Description</h3>
</div>
</div>
Regardinf your question on the comment : change the text color of the element from a rgba with 0 alpha to a 1 alpha:
.section2-box {
display: inline-block;
width: 50%;
height: 50%;
border-bottom: 4px solid #FFF;
border-right: 4px solid #FFF;
box-sizing: border-box;
position: relative;
}
.fadeHover {
transition: all .35s ease;
-webkit-transition: all .35s ease;
transition-delay: 0.10s;
-webkit-transition-delay: 0.10s;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
}
.fadeHover .overlay {
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
position: absolute;
cursor: pointer;
}
.fadeHover-title {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 1.3rem;
color: rgba(255,255,255,0);
transition: color 0.5s;
}
.fadeHover:hover .fadeHover-title {
color: rgba(255,255,255,1);
}
.fadeHover-description {
font-size: 1.1rem;
color: rgba(255,0,0,0);
transition: color 0.5s;
}
.fadeHover:hover .fadeHover-description {
color: rgba(255,0,0,1);
}
<div class="section2-box fadeHover" id="section2box3">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg">
<div class="overlay">
<h2 class="fadeHover-title">Option 1</h2>
<h3 class="fadeHover-description">Description</h3>
</div>
</div>
I'm making dropdown menu with HTML/CSS/JS. Entering five tags and adding "margin-top: 20px" it should make 20px spaces from top, but it makes bigger and smaller spaces - 24px from top, 28px from top, 28px from top...
I can't find the problem in my code. I was deleting margins, paddings on other classes. Any changes were unsuccessful.
HTML:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><div class="cog"></div></button>
<div id="myDropdown" class="dropdown-content">
<div class="dop"></div>
Text
Text
Text
Text
Text
</div>
</div>
<script src="js/js-1_dropdown.js"></script>
CSS:
.dropbtn {
height: 34px;
width: 34px;
background: #f0f0f0;
border-radius: 3px;
border: none;
cursor: pointer;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
}
.dropbtn:hover, .dropbtn:focus {
background: #ebebeb;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 100px;
margin-left: 100px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
width: 140px;
border-radius: 3px;
left: -53px;
top: 48px;
}
.dropdown-content a {
color: #b7b7b7;
text-decoration: none;
display: block;
font-family: OpenSans-Regular;
font-size: 12px;
text-align: center;
padding-top: 20px;
position: relative;
margin: 0;
}
.dropdown-content a:hover {
color: #adadad;
}
.show {display:block;}
.cog {
height: 16px;
width: 16px;
position: absolute;
top: 9px;
left: 9px;
background: url(img/i-3_settings.png);
}
.dop {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 4px solid #ffffff;
position: absolute;
top: -4px;
left: 65px;
}
* {
outline: none;
}
Live - https://jsfiddle.net/qc8aempj/
Ričards.