**i want button container to be hidden after the hover ends, when hover and the overlay appear, i want button container to be visible and when hover ends i want it to be hidden so i tried visiblity: visible but its not working, i also tried (display: none and display:block) and its also not working!
.container{
width:300px;
height: 300px;
background-color: red;
position: relative;
margin: auto;
}
img{
display: block;
width: 100%;
height: 100%;
/* position: absolute;
right:0;
top:0px; */
}
.overlay{
background-color: grey;
opacity: 0.5;
width: 3%;
height: 100%;
position: absolute;
top:0;
right: 0;
/* left:100%; */
transition: width 0.6s ease-out;
}
.container:hover .overlay{
width: 100%;
/* left:0% */
}
.overlay a{
color: white;
display: block;
text-decoration: none;
border-bottom: 5px;
margin-top: 9px;
}
#button-container{
visibility: hidden;
width: 120px;
height: 30px;
position: relative;
background-color: black;
color: white;
margin:70px auto;
text-align: center;
line-height: 2em;
}
#button-overlay{
width:10px;
height: 100%;
background-color: white;
position: absolute;
right: 0;
top:0;
transition: width 0.4s;
}
#button-container:hover #button-overlay{
width: 100%;
}
#button-container:hover #button-container{
visibility: visible;}
#button-container:hover #learn-more{
color: black;
}
<body>
<div class ="container">
<img src="3.jpeg" alt="">
<div class="overlay">
facebook
twitter
instagram
<div id="button-container">
<a id="learn-more" >learn more</a>
<div id="button-overlay"></div>
</div>
</div>
</div>
</body>
Try scaling your button-container from 0 to 1 with transition delay.
.container{
width:300px;
height: 300px;
background-color: red;
position: relative;
margin: auto;
}
img{
display: block;
width: 100%;
height: 100%;
/* position: absolute;
right:0;
top:0px; */
}
.overlay{
background-color: grey;
opacity: 0.5;
width: 3%;
height: 100%;
position: absolute;
top:0;
right: 0;
/* left:100%; */
transition: width 0.6s ease-out;
}
.container:hover .overlay{
width: 100%;
/* left:0% */
}
.overlay a{
color: white;
display: block;
text-decoration: none;
border-bottom: 5px;
margin-top: 9px;
}
.container:hover #button-container{
transform: scale(1);
}
#button-container{
width: 120px;
transform: scale(0);
height: 30px;
position: relative;
background-color: black;
color: white;
margin:70px auto;
text-align: center;
line-height: 2em;
transform-origin: left top;
trnasition: all 250ms ease-in-out;
transition-delay: 250ms;
}
#button-overlay{
width:10px;
height: 100%;
background-color: white;
position: absolute;
right: 0;
top:0;
transition: width 0.4s;
}
#button-container:hover #button-overlay{
width: 100%;
}
#button-container:hover #button-container{
visibility: visible;}
#button-container:hover #learn-more{
color: black;
}
<body>
<div class ="container">
<img src="3.jpeg" alt="">
<div class="overlay">
facebook
twitter
instagram
<div id="button-container">
<a id="learn-more" >learn more</a>
<div id="button-overlay"></div>
</div>
</div>
</div>
</body>
Related
I can't utilize the main dropdown menu on the site I'm developing because if you move too slowly or if you mouse over text that is in the background in the child element behind it, it will vanish.
I've tried adding !important tags. I've tried looking for any gaps between elements. I've tried adjusting the z axis priority values.
.dropdown {
position: fixed;
top: 1vmin;
left: 1vmin;
width: 10vmin;
height: 10vmin;
display: inline-block;
}
.dropdown:hover .dropdown-content {display:block !important;}
.dropbtn {
background color: black;
color: black;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99999;
}
.dropdown-content a {
color: black;
padding: 10px 10px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {background-color: red;}
.header {
position: fixed;
top: 1vmin;
width: calc(100vw - 14vmin);
height: 10vmin;
transform: translate(11vmin, 0vmin);
text-align: center;
padding: 0vmin;
vertical-align: middle;
dislpay: table-cell;
}
.header a {
float: left;
font-size: 4vmin;
color: white;
text-align: center;
vertical-align: middle;
padding: 1vmin 1vmin;
text-decoration: none;
}
table {
table-layout: auto;
width: 100%;
border: 1vmin solid black;
}
td {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
td a:hover {background-color: red;}
.navbar {
width: 10vmin;
height: 10vmin;
position: relative:
border: 0.5vmin solid #49b293;
cursor: pointer;
transition: all 0.3s ease;
}
.navbar div {
height: 0.8vmin;
width: 6vmin;
background-color: #fff;
position: absolute;
transition: all 0.5s ease;
}
.navbar .first {
top: 2.5vmin;
left: 2vmin;
}
.navbar .second {
top: 4.5vmin;
left: 2vmin;
}
.navbar .third {
top: 6.5vmin;
left: 2vmin;
}
.navbar:hover .first {
width: 4vmin;
transform: translate(0vmin, 4.75vmin) rotate(50deg);
transition: all 0.5s;
}
.navbar:hover .second {
opacity: 0;
transition: all 0.5s;
}
.navbar:hover .third {
width: 4vmin;
transform: translate(2.25vmin, 0.5vmin) rotate(-50deg);
transition: all 0.5s;
}
.navbar:hover {
border-radius:5vmin;
transition: all 0.3s ease;
}
.mainbody {
position: relative;
width: 100%;
top: 13vmin;
z-index:1;
}
</style>
<div class="dropdown" style="background-color:black;">
<button class="dropbtn" style="background-color:black;">
<div class="navbar">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="header" style="background-color:black;">
<table style="background-color:black;">
<tr>
<td>Home</td>
<td>IT</td>
<td>Science</td>
<td>Tech</td>
<td>News</td>
<td>Top</td>
</tr>
</table>
</div>
<div class="mainbody">
<h1>RoyHQ</h1>
</div>
</body>
</html>
I'd like for the drop menu to be relatively resilient to vanishing. It's not, it's almost unusable.
Click menu now!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.dropdownzzz {
position: fixed;
top: 1vmin;
left: 1vmin;
width: 10vmin;
height: 10vmin;
display: inline-block;
}
.dropbtn {
background color: black;
color: black;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99999;
}
.dropdown-content a {
color: black;
padding: 10px 10px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {background-color: red;}
.header {
position: fixed;
top: 1vmin;
width: calc(100vw - 14vmin);
height: 10vmin;
transform: translate(11vmin, 0vmin);
text-align: center;
padding: 0vmin;
vertical-align: middle;
dislpay: table-cell;
}
.header a {
float: left;
font-size: 4vmin;
color: white;
text-align: center;
vertical-align: middle;
padding: 1vmin 1vmin;
text-decoration: none;
}
table {
table-layout: auto;
width: 100%;
border: 1vmin solid black;
}
td {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
td a:hover {background-color: red;}
.navbar {
width: 10vmin;
height: 10vmin;
position: relative:
border: 0.5vmin solid #49b293;
cursor: pointer;
transition: all 0.3s ease;
}
.navbar div {
height: 0.8vmin;
width: 6vmin;
background-color: #fff;
position: absolute;
transition: all 0.5s ease;
}
.navbar .first {
top: 2.5vmin;
left: 2vmin;
}
.navbar .second {
top: 4.5vmin;
left: 2vmin;
}
.navbar .third {
top: 6.5vmin;
left: 2vmin;
}
.navbar.active .first {
width: 4vmin;
transform: translate(0vmin, 4.75vmin) rotate(50deg);
transition: all 0.5s;
}
.navbar.active .second {
opacity: 0;
transition: all 0.5s;
}
.navbar.active .third {
width: 4vmin;
transform: translate(2.25vmin, 0.5vmin) rotate(-50deg);
transition: all 0.5s;
}
.navbar.active {
border-radius:5vmin;
transition: all 0.3s ease;
}
.mainbody {
position: relative;
width: 100%;
top: 13vmin;
z-index:1;
}
.dropdown-content.active {
display: block;
}
</style>
<div class="dropdownzzz" style="background-color:black;">
<button class="dropbtn" style="background-color:black;" id="menu">
<div class="navbar" id="iconmenu">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</button>
<div class="dropdown-content" id="there">
Link 1
Link 2
Link 3
</div>
</div>
<div class="header" style="background-color:black;">
<table style="background-color:black;">
<tr>
<td>Home</td>
<td>IT</td>
<td>Science</td>
<td>Tech</td>
<td>News</td>
<td>Top</td>
</tr>
</table>
</div>
<div class="mainbody">
<h1>RoyHQ</h1>
</div>
<script>
$('#menu').on('click', function () {
$('#there').toggleClass('active');
$('#iconmenu').toggleClass('active');
});
</script>
I'm trying to create a sticker pull off effect with css.
For that I found this example: https://codepen.io/patrickkunka/pen/axEgL
Now I have three problems.
I'm using an image and not only colors.
The peeling effect is way to far in the example
Because I'm using an image, I can't move it around.
Now let me show the problems with some code:
.test-sticker {
/*
.sticker:hover .sticky{
transform: rotate(10deg);
}
*/
}
.test-sticker .anim750 {
transition: all 750ms ease-in-out;
}
.test-sticker .sticker {
position: relative;
width: 180px;
height: 180px;
margin: 0 auto;
backface-visibility: hidden;
}
.test-sticker .sticker .sticky {
transform: rotate(-125deg);
}
.test-sticker .sticker .sticky {
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 180px;
}
.test-sticker .sticker .reveal .circle {
font-family: 'helvetica neue', arial;
font-weight: 200;
line-height: 140px;
text-align: center;
cursor: pointer;
}
.test-sticker .sticker .reveal .circle {
background: purple;
}
.test-sticker .sticker .circle_wrapper {
position: absolute;
width: 180px;
height: 180px;
left: 0px;
top: 0px;
overflow: hidden;
}
.test-sticker .sticker .circle {
position: absolute;
width: 140px;
height: 140px;
margin: 20px;
border-radius: 999px;
}
.test-sticker .sticker .back {
height: 10px;
top: 30px;
}
.test-sticker .sticker .back .circle {
margin-top: -130px;
background-color: green;
}
.test-sticker .sticker .front {
height: 150px;
bottom: 0;
top: auto;
-webkit-box-shadow: 0 -140px 20px -140px rgba(0, 0, 0, 0.3);
}
.test-sticker .sticker .front .circle {
margin-top: -10px;
background: url("https://upload.wikimedia.org/wikipedia/commons/9/93/Wordpress_Blue_logo.png");
background-size: 140px 140px;
transform: rotate(-235deg);
}
.test-sticker .sticker:hover .back {
height: 90px;
top: 110px;
}
.test-sticker .sticker:hover .back .circle {
margin-top: -50px;
}
<div class="test-sticker">
<div class="wrapper">
<div class="sticker">
<div class="reveal circle_wrapper">
<div class="circle"></div>
</div>
<div class="sticky">
<div class="front circle_wrapper">
<div class="circle"></div>
</div>
</div>
<div class="sticky anim750">
<div class="back circle_wrapper anim750">
<div class="circle anim750"></div>
</div>
</div>
</div>
</div>
</div>
How do I get the greed circle just about 50% and not like now 80%?
Is there a fancy way to get the purple circle extended the same way like the green one? so when I hover over the image, I want to see the back of the sticker, which is white at the end.
I am Using CSS for controlling and showing POPUP on my page, everything works fine, but i want Okay button to close popup instead of close it by clicking on cross button on right top corner . is there any way for doing this in css. or what can i do alternative for this.
.box {
width: 40%;
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 #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 0.2s;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
/*Let's make it appear when the page loads*/
.overlay:target:before {
display: none;
}
.overlay:before {
content:"";
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background: rgba(0, 0, 0, 0.6);
position: fixed;
z-index: 9;
}
.overlay .popup {
background: #fff;
border-radius: 5px;
width: 64%;
position: fixed;
top: 25%;
left: 18%;
padding: 25px;
margin: 70px auto;
z-index: 10;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.overlay:target .popup {
top: -100%;
left: -100%;
}
#media screen and (max-width: 768px){
.box{
width: 70%;
}
.overlay .popup{
width: 70%;
left: 15%;
}
}
<!--popup starts-->
<div id="popup1" class="overlay">
<div class="popup">
<h3 style="margin-bottom: 13px; text-align:center; color:red;">Your Application Id : <?php echo $appid;?></h3>
<a class="close" href="#popup1">×</a>
<div class="content">
Thank you <span style="text-transform:uppercase; font-weight:600;"><?php echo $firstname;?> <?php echo $middlename;?> <?php echo $surname;?></span> for registring for e-visa service.there is more text.
</div>
</div>
</div>
<!--popup end-->
.... or you could just use an anchor styled as a button
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
display:block;
border:1px solid darkblue;
text-align:center;
background: steelblue;
color:white;
border-radius:5px;
padding:5px;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
/*Let's make it appear when the page loads*/
.overlay:target:before {
display: none;
}
.overlay:before {
content:"";
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background: rgba(0, 0, 0, 0.6);
position: fixed;
z-index: 9;
}
.overlay .popup {
background: #fff;
border-radius: 5px;
width: 64%;
position: fixed;
top: 0;
left: 18%;
padding: 25px;
margin: 70px auto;
z-index: 10;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.overlay:target .popup {
top: -100%;
left: -100%;
}
#media screen and (max-width: 768px){
.box{
width: 70%;
}
.overlay .popup{
width: 70%;
left: 15%;
}
}
<!--popup starts-->
<div id="popup1" class="overlay">
<div class="popup">
<h3 style="margin-bottom: 13px; text-align:center; color:red;">Your Application Id : <?php echo $appid;?></h3>
<div class="content">
Thank you <span style="text-transform:uppercase; font-weight:600;"><?php echo $firstname;?> <?php echo $middlename;?> <?php echo $surname;?></span> for registring for e-visa service.there is more text.
</div>
<a class="close" href="#popup1">OK</a>
</div>
</div>
<!--popup end-->
I am trying to get the following transition of the h1 tag working for the border-bottom of the div. Here's what I've set up for the h1 tag:
h1 {
text-align: center;
color: #666;
position: fixed;
display: inline-block;
}
h1:after {
position: absolute;
left: 50%;
content: '';
height: 5px;
background: blue;
transition: all 0.5s linear;
width: 0;
bottom: 0;
}
h1:hover:after {
width: 100%;
margin-left: -135px;
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
How do I make this work for the div border bottom? Here's what I came up with, and I see why it would't work (among other things the 'width' doesn't work for the border), but I can't figure out how to solve it.
h1 {
text-align: center;
color: #666;
position: fixed;
display: inline-block;
}
div:after {
border-bottom: 5px solid red;
left: 50%;
content: '';
transition: all 0.5s linear;
width: 0;
bottom: 0;
}
div:hover:after {
width: 300px;
margin-left: -135px;
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
Thanks in advance.
Try this:
div {
position: relative;
display: inline-block;
}
h1 {
color: #666;
margin: 0;
}
div::after {
border-bottom: 5px solid red;
position: absolute;
left: 50%;
content: ' ';
transform: translateX(-50%);
transition: width 0.5s linear;
width: 0;
height: 0;
bottom: 0;
}
div:hover::after {
width: 100%
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
using this
div{
position:fixed;}
and remove margin-left it will work
h1 {
text-align: center;
color: #666;
position: fixed;
display: inline-block;
}
div{
position:fixed;}
div:after {
position: absolute;
left: 50%;
content: '';
height: 5px;
background: blue;
transition: all 0.5s linear;
width: 0;
bottom: 0;
}
div:hover:after {
width: 100%;
left:0;
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
Try This:
div {
position: relative;<---Added
}
div:after {
position: absolute;<----Added
//more code....
}
h1 {
text-align: center;
color: #666;
position: fixed;
display: inline-block;
}
div {
position: relative;
}
div:after {
border-bottom: 5px solid red;
left: 50%;
content: '';
transition: all 0.5s linear;
width: 0;
bottom: 0;
position: absolute;
}
div:hover:after{
width: 300px;
margin-left: -155px;
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
im making header for html. and this is the code
<html>
<head>
<style type="text/css">
body{
background-color: yellow
}
.atas{
background-color: red;
width: 700px;
border-radius: 50px;
top:0px;
height: 190px;
position: fixed;
left:200px;
}
.one{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
margin-left: 50px;
position: static;
}
.two{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
position: static;
}
.three{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
position: static;
}
.upermain{
opacity: 0.9;
background-color: black;
top:200px;
width: 100%;
position: relative;
text-align: center;
left: 0px;
}
.article{
opacity: 0.7;
background-color: lightgray;
width:100%;
height:500px;
top:280px;
position: relative;
left: 0px;
}
</style>
</head>
<body>
<div><div class="atas"><div class="one"><br/><font style="arial" color="green">HOME</font></div>
<div class="two"><font style="arial" color="green"><br/>Contact</font></div>
<div class="three"><font style="arial" color="green"><br/>Article</font></div>
</div> <div class="upermain"><h1>Articles</h1></div>
<div class="article">Text <br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>
</body>
how to make the black background under the red background when scrolling?
im using opacity.if i delete the opacity it will become what i want.but i need the opacity
and how to make home contact and article to margin to the right?
here's the jsfiddle
http://jsfiddle.net/mhFxf/5015/
thanks before!
i think you need z-index in css.
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
<style type="text/css">
body{
background-color: yellow
}
.atas{
background-color: red;
width: 700px;
border-radius: 50px;
top:0px;
height: 190px;
position: fixed;
left:200px;
z-index:99;
}
.one{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
margin-left: 50px;
position: static;
}
.two{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
position: static;
}
.three{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
position: static;
}
.upermain{
opacity: 0.9;
background-color: lightblue;
top:200px;
width: 100%;
position: relative;
text-align: center;
left: 0px;
}
.article{
opacity: 0.7;
background-color: lightgray;
width:100%;
height:500px;
top:280px;
position: relative;
left: 0px;
}
</style>
<body>
<div><div class="atas"><div class="one"><br/><font style="arial" color="green">HOME</font></div>
<div class="two"><font style="arial" color="green"><br/>Contact</font></div>
<div class="three"><font style="arial" color="green"><br/>Article</font></div>
</div> <div class="upermain"><h1>Articles</h1></div>
<div class="article">Text <br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>