When you click on image in facebook , a box pos-up but the rest entire background gets covered by blackish transparent layer. what effect is that ? can it be applied using css ?
you can use this plugin:
//www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
yes. That effect can be done using only css.
If you have any id or class applied to that element. Then do this -
#transparentLayer {
opacity:0.5; //for non-IE
color:#000;
filter: alpha(opacity=50); // for IE
}
Open FancyBox
<div class="fancybox">
<div class="content">
<div class="close">x</div>
</div>
</div>
and jQuery:
$(".fancybox").hide();
$("a").click( function() {
$(".fancybox").show();
});
$(".close").click( function() {
$(".fancybox").hide();
});
CSS:
.fancybox {
background-color:rgb(0,0,0);
background-color:rgba(0,0,0, 0.7);
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.content {
width:600px;
background:#fff;
margin:0 auto;
height:100%;
position:relative;
}
.close {
position:absolute;
font-size:22px;
top:2px;
right:15px;
font-family:Arial;
}
.close:hover {
cursor:pointer;
}
http://jsfiddle.net/YnQbY/1/
It certainly can be applied using css:
here is the css for a black overlay:
.overlay{
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
the z-index indicates that the overlay is positioned above all other elements, the element (the image frame on Facebook) that should be on top of the overlay must have a z-index with value 1002 or more.
the -moz-opacity is the opacity for the overlay with firefox, the opacity for the overlay with chrome, safari,... and the filter is for an overlay with IE.
I have created a project with a similar issue, I created a div with class overlay that was initially hidden, and when clicked on a button the visibility was set to visible. The I've put an iFrame on top of the div overlay (with z-index 1002).
this was the css for my overlay:
.black_overlay{
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 15%;
left: 15%;
width: 70%;
height: 70%;
padding: 0px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 6px solid #E1143C;
background-color: rgba(228,208,150,1);
z-index:1002;
overflow: auto;
}
and following jQuery:
function showForm() {
$(".black_overlay").show(200);
$(".white_content").show(500);
}
Related
I have a div-container, a bootstrap collapse element. In it there is another round element, which changes position, when using the collapse function. Means: It should be positioned on the top-border, but behind the bottom-border.
How would you solve this task?
My first idea was to use object-fit to cut off the bottom part of the round element, but that did not look well with transition and collapse. Second idea was to use a thick border-bottom as an after-pseudo-element to cover the bottom part, which did not work so far.
Do you have any ideas or have you done something like that?
Thank you!
Use clip-path:
.box {
border: 3px solid;
height: 200px;
margin: 50px;
position: relative;
clip-path: inset(-200% 0 0); /* a big negative value on the top to clip only left/right/bottom */
transition: 1s;
}
.box:hover {
height: 50px;
}
.box:before {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
border: 3px solid;
border-radius: 50%;
background: red;
}
<div class="box">
</div>
You may also use transform3D + background to hide portions of it:
div {
margin:0 1em;
padding:1px;
display:flex;
padding-bottom:2em;
background:white;
transform-style: preserve-3d;
}
div[class] {
border:solid;
border-bottom:none;
height:150px;
transition:0.25s;
}
div[class] + div {
border-top:solid;
}
div[class]:hover {
height:60px;
}
div span {
height:150px;
width:150px;
align-self:center;
background:red;
border-radius:50%;
margin-right:1em;
border:solid;
margin-left:auto;
margin-bottom:-2.2em;
transform:rotatex(-0.15deg) translatez(1px);;
}
<div>Whatever stands here</div>
<div class>
<p>hover to collapse</p>
<span></span>
</div>
<div>Whatever stands next</div>
i was looking about two hours, how to center a div on the screen. So, when you scroll down a huge page and click on a link, the div "pop up" should appear on the center of screen, not of page.
If you take code like this, it will only center the div on the page, so it's not visible without scrolling up:
.centerDiv {
width: 800px;
border-radius: 5px;
background: #ccc;
padding: 10px;
height: 50px;
position: absolute;
margin-top: -25px;
margin-left: -400px;
top: 50%;
left: 50%;
}
Thanks for your help :)
Instead of position: absolute try out position: fixed
Use position: fixed and then center it like so:
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
This will get it centered on the page wherever you are. Just display the popup when you want to. See my demo at the bottom for a look into what it would look like.
Example:
body {
height: 3000px;
}
.popup {
width: 200px;
height: 150px;
border: 1px solid;
background: red;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
<div class="popup">I stay in the middle no matter where you scroll.</div>
Another example showing you the click link at the bottom of the page:
Demo Here
Note: Scroll to the bottom and click the span.
/*
this is javascript free .. almost.
Here i show you how to create pure CSS3 overlays
this uses the :target pseudo class
*/
*{margin:0;padding:0;}
#overlay{ /* we set all of the properties for are overlay */
height:80%;
width:80%;
margin:0 auto; /* center dude */
background:white;
color:black;
padding:10px;
position:absolute;
top:5%;
left:10%;
z-index:1000;
display:none;
/* CSS 3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#mask{ /* create are mask */
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:500;
width:100%;
height:100%;
display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
display:block;
opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
display:block;
position:absolute;
top:-20px;
right:-20px;
background:red;
color:white;
height:40px;
width:40px;
line-height:40px;
font-size:35px;
text-decoration:none;
text-align:center;
font-weight:bold;
-webkit-border-radius:40px;
-moz-border-radius:40px;
-o-border-radius:40px;
border-radius:40px;
}
#open-overlay{ /* open the overlay */
padding:10px 5px;
background:blue;
color:white;
text-decoration:none;
display:inline-block;
margin:20px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
Open Overlay
<div id="overlay">
×
<div style="height:20%"></div>
<h2 style="font-size:35px">Pure CSS Overlay</h2>
<br />
<br />
<br />
<p style="font-size:22px;">This overlay is made using zero javascript. With the CSS :target pseudo class. You can target an element then change it's properties. Here we hide this div then show it upon targeting. (see the URL). To exit we'll just change the URL back!</p>
</div>
<div id="mask" onclick="document.location='#';"></div> <!-- the only javascript -->
Here's a pure CSS3 overlay right here for ya. As for centering; margin: 0 auto;
FIDDLE DEMO HERE DUDE
center div on screen with CSS
HTML
<div class="hm_container">
<div class="hm_content"></div>
</div>
CSS
.hm_container{position: absolute; top: 50%; margin-top: -125px; left: 0; width: 100%;}
.hm_content{width:50%; margin-left: auto; margin-right: auto; height:150px; border:#000 solid 1px;}
DEMO1
Another demo by using CSS3
HTML
<div class="vhm"></div>
CSS
.vhm{min-height:200px; width:500px; left:50%; top:50%; border:#000 solid 1px; position:absolute;
transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
-moz-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
}
DEMO2
Simple question (I hope) that's eluding me.. I have an overlay for a modal window that sets the opacity to .87, however my div inside that (the modal content) seems to inherit that opacity.
CSS:
body { background-color:black; }
#overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align:center;
z-index: 99;
background-color: black;
opacity:.87;
}
#overlay > div {
width:300px;
height:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
opacity:1;
z-index: 100;
}
HTML:
<div id="overlay">
<div>some stuff here</div>
</div>
Here is a fiddle (the background should be pure white, not mixed). What am I doing wrong?
Opacity is inherited by child elements AFAIK.
Why not try using:
background:rgba(0,0,0,.87);
I removed the black background.
Check it here: http://jsfiddle.net/zZ57q/3/
i have following code
<div>
<img src="http://placehold.it/350x150"/>
<div class="link-cont">click here to see more info</div>
</div>
div {
width: 350px;
font-size:12px;
position: relative;
}
div img{
padding:0 10px;
}
.link-cont {
background: red;
position: absolute;
bottom: 0;
width: 370px;
height: 210px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div:hover .link-cont {
opacity: 1;
bottom:-40px;
}
.link-cont a{
opacity: 0;
}
div:hover .link-cont a{
position: relative;
opacity: 1;
bottom:-175px;
left:10px;
background:#fff;
color:red;
text-decoration:none;
padding:0 10px;
}
A link is wrapped inside a div which appears on hover. how do i make this touch device friendly.
jsfidd--> http://jsfiddle.net/yeyene/Nnd7w/17/
Several solutions:
skip hover effects in touch device stylesheets
use JavaScript to turn hover into click interactions
use JavaScript to simulate hover interactions on the touch device (see this Question on StackOverflow
Try this:
<script>
document.addEventListener("touchstart", function(){}, true);
</script>
I'm using the following CSS code to do a rollover effect with text:
.thumb {
position:relative;
}
.thumb img:hover {
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.thumb:hover {
background:#f00;
}
.thumb span {
z-index:-10;
position:absolute;
top:10px;
left:10px;
}
.thumb:hover span {
z-index:10;
color:#fff;
}
HTML code:
<div class="thumb">
<img src="thumbnail.jpg" />
<span>Text</span>
</div>
Everything is working well except when I hover over the text: the rollover effect disappears and I can see the image again.
Any ideas?
Thanks in advance
I guess that is too much of styles for simple overlay effect, if you are interested to see a demo I've made from scratch than here you go
Demo
HTML
<div class="wrap">
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="overlay">Hello This Is So Simple</div>
</div>
CSS
.wrap {
position: relative;
display: inline-block;
}
.overlay {
opacity: 0;
background: rgba(0,0,0,.8);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: opacity 1s;
color: #fff;
text-align: center;
}
.wrap:hover .overlay {
opacity: 1;
}