I'm trying to put overlay on my form. Basically I don't want user to access the form and just block the content by adding overlay. I added overlay but I can still give inputs in input fields. How do I stop that?
.overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
opacity: 0;
width: 100 %;
height: 100 %;
-webkit-transition: all 0.3s ease - in -out;
-moz-transition: all 0.3s ease - in -out;
-o-transition: all 0.3s ease - in -out;
-ms-transition: all 0.3s ease - in -out;
transition: all 0.3s ease - in -out;
opacity: 1;
}
<h1>Hello Plunker!</h1>
<div class="overlay">
<input type="text">First name
</div>
Like this?
.content {
text-align: center;
opacity: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition: all 0.3s ease - in -out;
-moz-transition: all 0.3s ease - in -out;
-o-transition: all 0.3s ease - in -out;
-ms-transition: all 0.3s ease - in -out;
transition: all 0.3s ease - in -out;
opacity: 1;
}
.overlay {
background: rgba(0, 0, 0, .75);
position: absolute;
width: 100%;
height: 100%;
}
<h1>Hello Plunker!</h1>
<div class="content">
<div class="overlay">
</div>
<input type="text">First name
</div>
Hope this helps.
Try this
.wrapper {
position: relative;
}
.overlay{
position: absolute;
width: 100%;
height: 100%;
}
.form-wrapper {
text-align: center
}
<div class="wrapper">
<div class="overlay"></div>
<div class="form-wrapper">
<input type="text">First name
</div>
</div>
A very simple & efficient way of doing this without extra & unnecessary divs is using ::after pseudo class.
It makes layering very easy.
HTML
<div class="form">
First name
<input type="text">
</div>
CSS
.form{
width:300px; /*Or what ever width you choose*/
height:400px; /*Or what ever height you choose*/
position: relative;
z-index:1;
}
.form:after{
position:absolute;
height: 100%;
width:100%;
content:'';
z-index:5; /* Make sure this value is higher than the .form class */
top:0;
left:0;
}
This is should do it :)
Here is a fiddle for a working demo.
Related
I have a <div> that contains a link.
At the bottom right corner of this <div>, I have an overlay element which takes over the whole <div> when hovered.
This overlay element also contains a link.
My problem is that the link in the overlying element is not clickable.
The problem is because I use pointer-events: none; on class .overlay-content, but if I don't use it, both links become dead.
Please see code here:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover~.overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Also, here is fiddle.
Is there any way that I can achieve this?
can't believe I actually found a pure CSS solution without any drawbacks.
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.wrap:hover .amg-corner-button_wrap {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.wrap:hover .amg-corner-button_wrap ~ .overlay-content {
pointer-events: auto;
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class="wrap">
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
</div> <!-- panel body -->
</div> <!-- panel default -->
JSFiddle
Instead of listening to the :hover event on the corner-button, listen to it on a parent element. Since the :hover will be dispatched regardless of the mouse interaction of the elements' children, it is possible to set pointer-events: auto to the children containing links (overlay-content), once the corner-button has been hovered. Now, that the overlay-content is hoverable and since it's a child of the wrapping div, it will cause the :hover to stay active over the whole wrapping div.
I would recommend using JS style swapping instead of CSS pointer events for this problem. You need to trigger one change to your css when you mouse over the bottom corner, and a separate event when you mouse out of the container. I do not believe CSS gives you that kind of conditional control.
Here is half a solution using animations instead of transitions. This works for when you hover on to the amg-corner-button_wrap but not when you move off it. I'm a bit new to animations so hopefully someone here who knows more maybe able to help you with the second half.
There is also a weird visual in here if you hover on the amg-corner-button_wrap and hover off mid transition. The reason for this is that I added a background color to overlay-content so when it's fading in and you mouse off amg-corner-button_wrap the swipe starts to reverse before the fade is complete.
Anyway, hope this 50% solution helps you or others drive this to 100%! Have to run to a meeting, good luck :-)
#keyframes example {
0% {
visibility: hidden;
opacity: 0;
}
1% {
visibility: visible;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 200px;
width: 200px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -120px;
bottom: -120px;
width: 200px;
height: 200px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.overlay-content {
visibility: hidden;
opacity: 0;
background-color: #e8c63d;
bottom: 0;
color: #333;
left: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.overlay-content~.amg-corner-button_wrap,
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.amg-corner-button_wrap:hover~.overlay-content,
.overlay-content:hover {
animation-name: example;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-delay: 0.3s;
animation-fill-mode: both;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Here's a working fiddle for a css and html only change: https://jsfiddle.net/y2auh7gn/4/.
It separates the link from overlay-content and places it where it's supposed to be with position: absolute. We need to move the link out of overlay-content so that when we hover over it the overlay doesn't disappear.
There's a side-effect where the link pops out with the corner piece.
am developing a simple image view and i want the image to zoom up to the left hand side when a user place up a mouser point. Current i have been able to make image zoom out but it goes to right by default. Here is my codes
.imageDiv {
position: static;
height: 130px;
width: 160px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
transform: scale(1);
}
.imageDiv:hover {
width: 300px;
height: 250px;
position: relative;
display: block;
border: 3px solid #fed136;
background-color: #b20000;
border-radius: 20px;
position: relative;
z-index: 999;
}
<div class="imageDiv">
<img src="./img/images/mobilePhone.png">
</div>
please help
below is my code:
HTML
<div id="wrapper" style="background-color:red">
<div id="sidebar-wrapper" style="background-color:yellow">sidebar
<div id="result"></div>
</div>
<div id="header" class="container-fluid">
<div class="navbar">
<a href="#menu-toggle" id="menu-toggle" >Press</a>
<div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span></div>
</div>
</div>
</div>
CSS
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y:auto;
background: #050545;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
JS
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
The jsfiddle is below:
JSFIDDLE
As you guys can see, it is a sidebar slide to the right when I press the link. It kinda squeeze the content on the right side of the screen when I press it.
What I want is the the right side of the content to slide to the right to go behind the screen, not squeeze all content together. Any ideas?
Give fixed width as the width of the viewport to the #wrapper element.
Use vw to set the width.
1/100th of the width of the viewport.
#wrapper {
...
width: 100vw; // vw: Viewport width when page is loaded
}
More about vw
Demo
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 100vw;
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #050545;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="wrapper" style="background-color:red">
<div id="sidebar-wrapper" style="background-color:yellow">sidebar
<div id="result"></div>
</div>
<div id="header" class="container-fluid">
<div class="navbar"> Press
<div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span>
</div>
</div>
</div>
</div>
has anyone any idea if you can do this in jquery? Where clicking on a piece of the logo expands the rest? Example image:
Why use jQuery if this can be achieved using CSS?
HTML:
<div id='icon-wrapper'>
<img id='icon' alt='icon' src='http://i.stack.imgur.com/sKhJf.jpg?s=60&g=1'/>
<p>Text here</p>
</div>
CSS:
#icon-wrapper{
margin:0 auto;
height:110px;
width:110px;
overflow:hidden;
/* CSS Transitions */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#icon-wrapper:after{
content:"";
display:block;
width:100%;
clear:both;
}
#icon-wrapper:hover{
width:300px;
}
#icon-wrapper:hover #icon{
margin-left:200px;
}
#icon{
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
/* Position Absolute to put the icon on the top */
position:absolute;
z-index:10;
/* CSS Transitions */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#icon-wrapper p{
color:black;
font-size:35px;
font-family:arial, helvetica;
/* Fixed width and float left is needed */
width:200px;
float:left;
}
It's long but without using jQuery is a plus point.
Note that we need to use fixed width for the elements, especially for the paragraph.
UPDATE:
For transparent icon, we need to hide the text first, using opacity:0;. Then add CSS Transition so we have smooth effect on hover. Finally, show the text on hover with opacity:1;. But this trick has a bug, sometimes the text didn't 'hide' fast, so it's still shown for a time in the icon. The best solution is adding a background color to the icon, using the same color as the container background.
Updated CSS (transparent text):
#icon-wrapper:hover p{
opacity:1;
}
#icon-wrapper p{
/* ... */
opacity:0;
-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-ms-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
transition: all 2s ease-in;
}
Updated CSS (using background color on the icon):
#icon{
/* ... */
background:white;
}
Here is a jsFiddle
Here is an updated fiddle for transparent icon.
Here is an updated fiddle with background color added to the icon.
Not sure if this is something you want.
Check the demo here: http://jsfiddle.net/SdanM/4/
HTML:
<div id="container">
<div id="img">Hidden Element</div>
<div id="btn">Hover to expand</div>
<div>
CSS: hide the hidden element first
#container {
position: relative;
}
#img {
background-color: yellow;
position: absolute;
width: 100px;
height: 50px;
top: 50px;
left: 50px;
display: none;
}
#btn {
background-color: red;
position: absolute;
width: 50px;
height: 50px;
top: 50px;
left: 50px;
}
jQuery: move the blocks
$("#container").mouseenter( function() {
$("#img").animate({
left: "-=50",
width: "show",
}, 1000);
$("#btn").animate({
left: "+=50",
}, 1000);
});
$("#container").mouseleave( function() {
$("#img").animate({
left: "+=50",
width: "hide",
}, 1000);
$("#btn").animate({
left: "-=50",
}, 1000);
});
I have a message box which I want to slide down on click. I do this by adding a css class through Angular (and jQuery in my example). But my CSS transition does not take effect.
Is there any obvious mistake I'm doing?
Here's my fiddle: http://jsfiddle.net/mBKXn/
and my code:
// jQuery
$('.test').on('click',function(){
$('#msgContainer').toggleClass('msgShow');
});
// HTML
<div class="container">
<div id="msgContainer" class="msg">
<p>Message here</p>
<p>T2</p>
<p>T4</p>
</div>
Test text
</div>
<button class="test">Click</button>
// CSS
.container{
position: relative;
height: 200px;
width: 400px;
border: solid 1px #222;
}
.msg{
position: absolute;
top: 0;
background-color: #FEEFB3;
height: 0;
width: 100%;
overflow: hidden;
-webkit-transition: height 0.8s linear;
-moz-transition: height 0.8s linear;
-o-transition: height 0.8s linear;
-ms-transition: height 0.8s linear;
transition: height 0.8s linear;
}
.msgShow{
height: auto;
}
To animate height from 0 to auto you have to use max-height instead:
.msg{
position: absolute;
top: 0;
background-color: #FEEFB3;
max-height: 0;
width: 100%;
overflow: hidden;
-webkit-transition: max-height 0.8s linear;
-moz-transition: max-height 0.8s linear;
-o-transition: max-height 0.8s linear;
-ms-transition: max-height 0.8s linear;
transition: max-height 0.8s linear;
}
.msgShow{
max-height: 1000px;
}
Seems to work: http://jsfiddle.net/mBKXn/3/
Also take a look at this question.
you need to set a defined height. Height:auto won't work as this is the default height value.
see the specs for the height property here:
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
http://jsfiddle.net/mBKXn/7/
.msgShow{
height: 100%;
}
Another (older IE compliant) way to do this is through slideToggle.
Updated Fiddle that works and another Fiddle where I removed some of your transition css and it makes the animation smoother in my opinion.
your code needs a slight change:
$('.test').on('click',function(){
$('#msgContainer').slideToggle('slow');
});
and your class needs a slight change:
.msg{
display:none;
position: absolute;
top: 0;
background-color: #FEEFB3;
height: auto;
width: 100%;
overflow: hidden;
}