I am having the following code from this link for making a Lightbox effect. It is working fine in Firefox and Google Chrome but having problem in Internet Explorer 8. In IE, all the images and text of the webpage coming above the black_overlay and both black and white overlay are in background. Please help in fixing the problem.
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#666;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position:absolute;
top: 15%;
left: 320px;
width: 50%;
height: 40%;
padding: 16px;
border: 2px solid #d2d2d2;
background-color: white;
z-index:1002;
overflow: auto;
/*margin-top:100px;*/
}
HTML:
Login
<div id="light" class="white_content">
<p>Hello</p>
Close
</div>
<div id="fade" class="black_overlay"></div>
Remove the </div> after the line <p>Hello</p>. Also see my jsfiddle.
Related
I made my image blurred when you hover over it but every time I try to make the image clickable where it redirects to a new link, the image disappears on Chrome. How can I fix this?
This is the code I have right now for my blurred image:
<div class="textWithBlurredBg2">
<img src="https://taylorsdigigracelim.files.wordpress.com/2014/04/week-4-practical-ex-1.jpg"> </a>
<h2>travel</h2>
</div>
(that's my code in HTML)
.textWithBlurredBg2 {
width: 300px;
height: 200px;
display: inline-block;
margin: 4px;
position: relative;
transform: translate(370px, 200px);
}
.textWithBlurredBg2 img {
width: 100%;
height: 100%;
border-radius: 4px;
transition: .3s;
}
.textWithBlurredBg2:hover img{
filter: blur(2px) brightness(90%);
box-shadow: 0 0 9px #DA70D6;
}
.textWithBlurredBg2 :not(img) {
position: absolute;
top: 30%;
z-index: 1;
color: #fff;
text-align: center;
width: 100%;
}
(That's my code in CSS)
basically all i want to do is: Have a picture and when someone hovers over it i want some text to appear in its position(in the middle to be exact). What I have done so far is make the picture disappear on hover but i cannot get the text to be appeared..
Html:
<div class="container">
<img id="atp "class="atp" src="atp.jpg">
<div class="center">Some text</div>
</div>
Css:
atp{
display:block;
margin-left:auto;
margin-right:auto;
width:27%;
height:50%;}
container{
position: relative;
text-align: center;
}
.center{
position: absolute;
top:50%;
left:50%;
opacity: 0;
}
So basically, what i seek to be done is .atp:hover{opacity:0;} and what I also want is on atp's hover the .center{opacity:1;] So is there a way to put the opacity of center's to 1 when I am in the atp:hover{} code block?
Hope everything looks fine, thanks in advance!
Here is the code. Hope it will help you. if any changes please let me know.
/********* Simple or original overlay *******/
/* Main container */
.overlay-image {
position: relative;
width: 100%;
}
/* Original image */
.overlay-image .image {
display: block;
width: 100%;
height: auto;
}
/* Original text overlay */
.overlay-image .text {
color: #fff;
font-size: 30px;
line-height: 1.5em;
text-shadow: 2px 2px 2px #000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-image .hover {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
/* New overlay appearance on hover */
.overlay-image:hover .hover {
opacity: 1;
}
/********* Background and text only overlay on hover *******/
.overlay-image .normal {
transition: .5s ease;
}
.overlay-image:hover .normal {
opacity: 0;
}
.overlay-image .hover {
background-color: rgba(0,0,0,0.5);
}
<div class="overlay-image">
<a href="LINK_URL">
<div class="normal">
<div class="text">Image + text ORIGINAL</div>
</div>
<div class="hover">
<img class="image" src="https://dummyimage.com/200x150/00ccff/fff.png" alt="Alt text hover" />
</div>
</a>
</div>
#atp {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 27%;
height: 50%;
z-index: 50;
}
.container {
position: relative;
text-align: center;
}
.center {
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
}
#atp:hover {
opacity: 0;
}
try this, using z-index. It worked with me :)
I would like to add a link to an image that has an overlay applied to it. When users hover over the image they get an opaque overlay and text appear. This works great, however I also need users to be able to click that image and taken to a link.
I have pasted my code below - the overlay works but the link portion does not. I believe it's because the overlay is interfering. I tried changing the placement of the link but was unable to do so. I am able to make the '+' be the link, but ideally the entire image should link.
Any thoughts?
JSFiddle
.roomphoto:hover .img__description { transform: translateY(0); }
.roomphoto .img__description_layer { top: 30px; }
.roomphoto:hover .img__description_layer { visibility: visible; opacity: 1; }
.img__description_layer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #cdcbca;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .2s, visibility .2s;
}
.roomphoto {
height: 166px;
}
.img__description {
transition: .2s;
transform: translateY(1em);
z-index: 999;
}
.overlay {
position: relative;
}
.overlay:after {
position: absolute;
content:"";
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
}
.overlay:hover:after {
opacity: .8;
}
.blue:after {
background-color: #1a3761;
}
.img__description a {
color: #fff;
}
.roomselect {
clear: both;
float: none;
width: 100%;
max-width: 1000px;
margin: 0px auto;
padding-top: 20px;
}
.roomselect img {
width: 100%;
margin-bottom: -10px;
}
.room3 {
width: 32%;
text-align: left;
float:left;
}
<div class="roomselect"><div class="room3">
<div class="roomphoto overlay blue">
<a href="http://www.google.com">
<img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
</a>
<div class="img__description_layer">
<p class="img__description">
<span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span>
</p>
</div>
</div>
</div>
You need to rearrange your html in such a way that when you click on image, you are actually clicking on the anchor tag. I have made some changes to your html, let me know if these work. You might have to increase roomphoto height.
<div class="roomselect">
<div class="room3">
<a href="http://www.google.com">
<div class="roomphoto overlay blue">
<img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
<div class="img__description_layer">
<p class="img__description"><span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span></p>
</div>
</div>
</a>
</div>
</div>
I am making a website and made a shape as a background with an after. Before the background i want some text. I made 2 divs, and within those divs i made two paragraphs. I set the paragraphs to display flex, and to justify space around so they are seperated in 2 blocks in one row. What happens: in Chrome and Firefox everything is oke. In Safari, the last paragraph just disappears. Trying to set z-index doesn't work, or i am doing something wrong.
Can you help me?
Thanks!
I also made a codepen for this: https://codepen.io/Dehv27/pen/OKmByy
Thanks in advance for the help!
HTML
<section class="intro">
<div class="text textblok1">
<p>Test</p>
<p>Test</p>
</div>
<div class="text textblok2">
<p>Test</p>
<p>Test</p>
</div>
</section>
CSS / SCSS:
section.intro{
width: 100%;
margin-top: 3rem;
height: 620px;
&:after{
content: '';
position:absolute;
height: 300px;
overflow: hidden;
top: 0;
right:0;
bottom:0;
left:0;
z-index: -1;
background: #3fb9bc;
transform: perspective(1366px) rotateY(-12deg) scale(1.6);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.text{
display: flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;
p{
width: 45%;
span{
text-decoration: underline;
}
}
}
.textblok1{
padding-top: 6rem;
transform: rotate(-2deg);
}
.textblok2{
padding-top: 8rem;
transform: rotate(2.2deg);
}
}
It's something wrong with rotate and scale. If I remove perspective and change rotateY to simple rotate, it will work without any issues (here is my codepen example):
section.intro{
width: 100%;
margin-top: 3rem;
height: 620px;
&:after{
content: '';
position:absolute;
height: 300px;
overflow: hidden;
top: 0;
right:0;
bottom:0;
left:0;
z-index: -1;
background: #3fb9bc;
transform: rotate(5deg) scale(1.8); //this line is changed and result is the same but no errors in Safari now!
border-top: 2px solid black;
border-bottom: 2px solid black;
}
Currently I'm working with a wordpress theme. I don't know PHP so can't edit the files, and unable to add bootstrap with it. But I need a pop-up box in my page, so I used CSS. But the problem is the pop-up window poping up within the parent window, I want it full screen. How can i do it? Check Screenshot and code here: http://justpaste.it/n4ol
You can use new popup?
Here is the
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
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: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click here</p>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="fade" class="black_overlay"></div>
</body>
Try this
Use this popup in footer. You will find help .
try something like this:
.popup{
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
}