I have three divs, one big parent div, one smaller box inside the parent, and then text inside of the smaller box.
<div class='parentDiv'>
<div class='smallBox'>
<div class='text'> Hello!
</div>
</div>
</div>
For some reason, the opacity of my 'Hello!' text is being faded to something that looks like .5; or 50% I can't tell because I have nothing setting the opacity of any of these divs.
the Background-color of my ParentDiv and smallBox is set to : transparent; so you can see the text inside.. would the transparent background be affecting the opacity of the text? How can I fix this?
here is my css.
.parentDiv {
width: 1020px;
height: 200px;
background-color: Transparent;
position: absolute;
top: 450px;
}
.smallBox {
width: 200px;
height: 200px;
position: absolute;
left: 160px;
}
.text{
font-family: robotolight, sans-seriff;
font-size: 18px;
color: #ffffff;
text-align: center;
left: 30px;
position: absolute;
z-index: 100000;
width: 100px
margin: 0px auto;
line-height: 30px;
}
Fonts with a 'light' font-weight will look more faded due to their nature. Try changing fonts and see if it is still an issue.
Related
I have an image gallery with a hover effect. once the user hovers over the image it uses a css transform.
transform: scale(1.1);
The image looks like this without the hover effect.
and with the effect it looks like this.
As you can see it does zoom in nicely but somehow the text disapears in the background. I tried using z-index but this has no effect. How do I keep the text in the front?
Here is a jsfiddle : https://jsfiddle.net/xk2us9q8/
z-index requires a positioning value other than static to take effect.
Just add position:relative to the text.
.container {
width: 350px;
height: 350px;
padding: 0px;
margin: 0px;
overflow: hidden;
}
p {
color: white;
width: 350px;
text-align: center;
font-size: 28px;
z-index: 100;
margin-top: -90px;
position: relative;
}
.dnnmedia_image {
width: 350px;
height: 350px;
transition: all .2s ease-in-out;
overflow: hidden;
object-fit: cover;
}
.dnnmedia_image:hover {
transform: scale(1.1);
}
<div class="container">
<img src="https://dummyimage.com/350x350/000/fff" class="dnnmedia_image" />
</div>
<p>
Random text
</p>
I'm implementing an on-boarding similar to Medium's which has text in the center of the box over an black-overlay with the background-image behind it.
However, I'm struggling with making the text INSIDE the div with the background-image NOT having opacity effect.
<div class="blackBackground">
<div class="topicImage opacityFilter" style="background-image: url(https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3);">
<p class="text-inside-image">Fashion</p>
</div>
</div>
Here's my CSS:
.blackBackground {
background-color: black;
z-index: -1;
}
.opacityFilter {
opacity: 0.8;
position: relative;
}
.margin-bottom-negsix {
margin-bottom: -6px !important;
}
.topicImage {
padding-bottom: 75%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
position: relative !important;
height:150px;
background-color: rgba(0, 0, 0, 0.8) !important;
}
.text-inside-image {
position: absolute;
top: 20%;
left: 35%;
color: white;
font-size: 24px;
font-weight: 500;
z-index: 1;
}
I've tried several solutions such as CSS - Opaque text on low opacity div?
and How to keep text opacity 100 when its parent container is having opacity of 50
and a couple more, but no luck.
My progress with my JSFiddle is here: https://jsfiddle.net/RohitTigga/akz5zng7/1/
Why is this occurring and how to fix it?
Hi change your HTML like this
HTML
<div class="my-container">
<h1 class="text-inside-image">Fashion</h1>
<img src="https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3">
</div>
CSS
.my-container {
position: relative;
background: #5C97FF;
overflow: hidden;
}
.my-container h1 {
padding: 50px;
text-align: center;
z-index: 2;
position: relative;
color: #fff;
}
.my-container img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
z-index: 1;
opacity: 0.6;
}
for reference https://plnkr.co/edit/YugyLd8H5mQExzF61rA9?p=preview
You have set a translucent background colour on the element and then covered it up with a background image.
If you want the background image to be translucent, use an image that is intrinsically translucent. The PNG image format supports this.
I would like to show the image with a non glassy display. Similar to the following one,
I am using the image as it is. I would like to show that with matte finish.
normal image:
Matte finish:
I am not able find it online. May be I am not using the right search keywords. Could anyone help me with this?
Inside a container I did put an image with reduced contrast / brightness / saturation plus a little bit of blur (all these four effects made by CSS filter). The image could've be placed as the container background but I wanted to apply these filters so it went separated.
After it, there's a colored layer with transparency covering the whole area. The letter represents the page's content that can be anything.
UPDATE: multiple filters must be all in a row, like it is on this latest update:
body {
width: 100%;
height: 100vh;
margin: 0px;
font-family: Georgia, serif;
}
#container {
width: 100%;
height: 100%;
position: relative;
background-color: navy;
overflow: hidden;
}
#thepic {
width: 100vw;
height: 100vh;
object-fit: cover;
-webkit-filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
}
#color_layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: navy;
opacity: 0.3;
}
#content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
}
h1 {
display: inline-block;
color: white;
text-shadow: 1px 2px 2px #000;
font-size: 4em;
font-weight: 100;
letter-spacing: 2px;
text-align: center;
vertical-align: middle;
}
#letter {
vertical-align: middle;
}
<div id=container>
<img id=thepic src="http://i.imgur.com/s9J4MnI.jpg">
<div id=color_layer></div>
<span id=content><img id=letter src="http://i.imgur.com/CB1vUqy.png" alt=img><h1> 書面</h1></span>
</div>
#freestock.tk - That's the idea I had in mind also.
Here's another way to do it with less markup:
img {
max-width: 100%;
height: auto;
}
.container {
position: relative;
z-index: -1;
}
.container:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
<div>
<h1>Original Image</h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
<div class="container" id="content">
<h1> With Transparent Overlay </h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
In this example, I put the image inside a container that is relatively positioned. The z-index is -1 so it will be behind the next layer.
Then I used a pseudo element that is absolutely positioned so it will stretch across the whole width of the container and cover the image. The positive z-index sets it on top of the first layer. Rather than setting an opacity, I used an rgba value for the background color. The first three numbers or the red, green, and blue values as usual, but the last number is a decimal between 0 and 1 that sets the opacity level. I made it a little darker than you probably want just so you can see the difference. You may also choose a different color to fit your image.
For reference: http://nicolasgallagher.com/css-background-image-hacks/
I know how to put text on hover on an image if the height and the width is fixed. but I have a responsive slider (owl-slider) and want to add link (easy - yeah.) and a blue overlay with white text in it and a simple fading/sliding transition from the overlay.
The problem is: every item changes its height and width on resizing. I could write several media queries, but I'm quite sure there must be a simpler solution to that problem.
I have a very simple markup:
<div>
<a href="#">
<img src="http://placehold.it/360x100">
<div class="overlay">Click here for more Infomartion</div>
</a>
</div>
Normally I would go for pure css method with setting height and width from .overlay to the image size and set visibility on hover. But.. that won't work, because the width & height will differ from viewport to viewport. So, what would you suggest?
The trick involves setting position: relative to the parent container .image-container which contains the image. Using display: inline-block will force the parent container to shrink-to-fit the image.
You then apply position:absolute to the child container (overlay) .hover-text and set all the offsets (left, right, top and bottom) to zero, which will force the overlay to match the size of the image.
If you want to vertically center the text, you need to add two nested blocks.
One way of doing it is to repurpose the a element using display: table with width and height of 100%, and then apply display: table-cell to the nested div with vertical-align: middle. This will center the text vertically if so desired.
I added a transition effect to demonstrate how to set it up. You can
adjust the details as you like for duration and transition type.
Ref: http://www.w3.org/TR/css3-transitions/
You could also do a translation using a CSS transform, which is also feasible since the modern browsers support transforms (especially in 2D).
.image-container {
position: relative;
display: inline-block;
}
.image-container .hover-text {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 255, 0.5);
opacity: 0;
transition: opacity;
}
.hover-text a {
display: table;
height: 100%;
width: 100%;
text-decoration: none;
}
.hover-text a div {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 3.0em;
color: white;
}
.image-container img {
vertical-align: top; /* fixes white space due to baseline alignment */
}
.image-container:hover .hover-text {
opacity: 1;
transition-duration: 1s;
transition-timing-function: linear;
}
<div class="image-container">
<img src="http://placehold.it/360x100">
<div class="hover-text">
<a href="#">
<div>Text on hover</div>
</a>
</div>
</div>
Try this, it doesn't care about the image size
.image-container{
position: relative;
display: inline-block;
}
.image-container .hover-text{
position: absolute;
top: 33%;
width: 100%;
text-align: center;
visibility: hidden;
}
.image-container:hover .hover-text{
visibility: visible;
}
/* styling */
.hover-text{
font-family: sans-serif;
color: white;
background: rgba(0,0,0,0.3);
text-shadow: 1px 1px 1px black;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.hover-text a{
color: white;
}
<div class="image-container">
<img src="http://placehold.it/360x100">
<div class="hover-text">
Text on hover Link
</div>
</div>
Skipped the transition stuff, but is this what you're requesting?
div {
position: relative;
}
img {
width: 100%;
}
.overlay {
background: blue;
color: white;
display: none;
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
}
a:hover .overlay {
display: block;
}
JSFIDDLE: http://jsfiddle.net/volzy/hLpLabaz/1/
For full size overlay do:
.overlay {
height: 100%;
top: 0;
}
I have a Light Box Code that works great! You click on a button and then there is an overlay of a black screen and a content box. I am wanting to know if there is a way to make the light box or white_content in the CSS below appear on the screen based on how far down the user has scrolled down the page.
Basically, I am wanting to have the white_content appear in the middle of the view able screen.
http://s1309.beta.photobucket.com/user/mievan123/library/Light%20Box
The first image is showing the Light Box centered on the page and this is what I want. I am scrolled all the way down the the bottom of the page.
Also you can see it in action at http://www.green-panda.com/solutions.html
The second image is showing the Light Box barely visible on the page. I scrolled up just a little as you can see. The Red Outline is where I want the Light Box to move to when i'm at that position.
Would a screen recording help make this question more clear?
All of my code is provided below:
My CSS for the light box
.black_overlay{
display: none;
position: fixed;
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: 50%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid green;
background-color: white;
z-index:1002;
overflow: auto;
}
The script for opening the lightbox
<p align="right">
<a href="javascript:void(0)"
class="button"
onclick="document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'"
>Contact Us</a>
</p>
The actual lightbox coding
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)"
onclick = "document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'"
>Close</a>
</div>
<div id="fade" class="black_overlay"></div>
JSFiddle
You can't center it with the width and height being percentages (at least not without using JS).
You can however set a static height and width and center it like this:
Use top: 50%; left: 50%; and static, negative top and left margins, which should be half of the width/height of your element.
.white_content {
display: none;
position: fixed;
top: 50%;
left: 50%;
margin: -182px 0 0 -182px;
width: 300px;
height: 300px;
padding: 16px;
border: 16px solid green;
background-color: white;
z-index: 1002;
overflow: auto;
}
JSFiddle
I have created a demo for you here. I am sure that will help you to achieve that you want.
Following is the code that I am using in the demo:
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}