Here is a link to something similar.
https://codepen.io/suez/pen/RpNXOR
.img {
overflow: hidden;
z-index: 2;
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
width: 260px;
height: 100%;
padding-top: 360px;
}
.img:before {
content: "";
position: absolute;
right: 0;
top: 0;
width: 900px;
height: 100%;
background-size: cover;
background-image: url(/images/art.png);
transition: transform 1.2s ease-in-out;
}
.img:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
Is there a reason why the button and text disappear behind the image when it transitions ove
If you are looking to have your text & button appear on top of the image, the text & button must have a higher z-index than 2 because assuming that your .img class controls your image, your image is declared as z-index: 2;. Try adding the z-index: 3; declaration to both your text & button.
Related
How to create a partial width opacity ?
I have a div that has a background image with transparency, I used after to do get the effect like this
.indicators-menu {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
z-index: 1;
}
.indicators-menu::after {
background-image: url('bg_platform_repeat.jpg');
content: "";
opacity: 0.9;
top: 0;
position: absolute;
z-index: -1;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: unset;
}
This works great, but what I need to do is to split the opacity by width
instead of 100% to 80% with opacity 0.9 and 20% with opacity 1
I thought to use the CSS mask property but I see that its not well supported
what i need to do is to split the opacity by width instead of 100% to 80% with opacity 0.9 and 20% with opacity 1
Use two pseudo-elements with the same background image but position them differently.
div {
width: 460px;
height: 300px;
margin: 1em auto;
border: 1px solid red;
position: relative;
}
div:before,
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-image: url(http://www.fillmurray.com/460/300);
background-repeat: no-repeat;
background-size: cover;
}
div:before {
width: 80%;
opacity: 0.5;
/* for example */
}
div:after {
width: 20%;
left: 80%;
background-position: 100% 0;
}
<div>
</div>
One idea is to use an overlay above the image to simulate this effect. The color used need to be the same as the below background:
.box {
background:
linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)) left/80% 100%,
url('https://picsum.photos/200/200?image=1069') center/cover;
background-repeat: no-repeat;
width: 200px;
height: 200px;
}
<div class="box">
</div>
Use :before with background: white; and opacity:0.1(I set 0.4 only you to see the difference) and width:80%
.indicators-menu::after,.indicators-menu::before{
background-image: url('https://i.imgur.com/BK7wL0d.jpg');
content: "";
opacity:1;
top: 0;
position: absolute;
z-index: -1;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: unset;
}
.indicators-menu::before{
background: white;
opacity: 0.4;
z-index: 2;
width: 80%;
}
<div class="indicators-menu">
</div>
I want a div to be completely covered by another layer that looks like frosted glass. The div under the frosted glass will be the background for my responsive website. It can be gradient or just a picture like in my fiddle. I managed to cover the the div with the effect. However there is still a little gap between the edges of the layers but I want the effect to cover the entire div. Thanks.
.bg {
position: absolute;
background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=);
width: 100%;
height: 500px;
margin: 0;
}
.blurred-box {
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: inherit;
overflow: hidden;
}
.blurred-box:after {
content: '';
width: 100%;
height: 100%;
background: inherit;
position: absolute;
left: 0;
left position right: 0;
top: 0;
bottom: 0;
top position bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
}
<div class="bg">
<div class="blurred-box"></div>
</div>
One way to fix that is set :after to be bigger then container:
.bg {
position: absolute;
background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=);
width: 100%;
height: 500px;
margin: 0;
}
.blurred-box {
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: inherit;
overflow: hidden;
}
.blurred-box:after {
content: '';
width: 120%;
height: 120%;
background: inherit;
position: absolute;
left: -10%;
top: -10%;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
}
<div class="bg">
<div class="blurred-box"></div>
</div>
Also you could try to scale a little the blurred image container and hide the overflow on .bg:
.bg {
overflow: hidden;
}
.blurred-box:after {
transform: scale(1.08, 1.08);
}
and set padding: 0; margin: 0; on body to get rid of the small offsets. Some styles are redundant. So, my attempt:
body {
padding: 0;
margin: 0;
}
.bg {
position: relative;
background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=);
width: 100%;
height: 500px;
overflow: hidden;
}
.blurred-box {
width: 100%;
height: 100%;
background: inherit;
}
.blurred-box:after {
content: '';
width: 100%;
height: 100%;
background: inherit;
position: absolute;
top: 0;
left: 0;
top: 0;
bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
transform: scale(1.08, 1.08);
}
<div class="bg">
<div class="blurred-box"></div>
</div>
i'm trying to have ornamented border all along the right and left side of the document, but for some reason I have not managed to get the elements with those border ornaments reach 100% height.
What i have right now is:
html {
height: 100%;
}
body {
min-height: 100%;
background-image: url("../img/bgtile.png");
background-repeat: repeat;
background-color: transparent;
font-size: 18px;
}
body:before {
content: "";
background: transparent url("../img/frame-ornament-left.png") repeat-y 11px 0px;
height: 100%;
width: 30px;
display: block;
left: 0;
position: absolute;
top: 0;
z-index: 0;
}
body:after {
content: "";
background: transparent url("../img/frame-ornament-right.png") repeat-y;
height: 100%;
width: 30px;
display: block;
right: 0;
position: absolute;
top: 0;
z-index: 0;
}
And no matther what i try, those before and after elements always stay as high as viewport is. I've tried setting min-height to 100% on HTML element too, that indeed made html element as long as body, but those elements with ornaments in them still remain as high as viewport...
Set the body to position: relative, so it will be the context for the pseudo elements, instead of the html, and set bottom: 0 to both pseudo elements:
body {
position: relative;
background-image: url('../img/bgtile.png');
background-repeat: repeat;
background-color: transparent;
}
.content-demo {
height: 800px;
}
body:before {
content: "";
background: red;
width: 30px;
display: block;
left: 0;
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}
body:after {
content: "";
background: blue;
width: 30px;
display: block;
right: 0;
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}
<div class="content-demo"></div>
I am trying to apply a simple css3 animation, and apply opacity to the background image when the text jumps but it effect the whole div's.
Here is the jsfiddle link
And this is the main wrapper div:
.movie_thumb_wrapper {
float: left;
line-height: 31px;
background-color: #424755;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
height: 140px;
width: 220px;
background-size: 220px 140px;
background-repeat: no-repeat;
background-color:#1a1c26;
}
A slightly different approach from Vitorino Fernandes' answer would be to 'nest' a pseudo element between the text and background:
div {
position: relative;
height: 300px;
width: 300px;
display: inline-block;
color:white;
}
div:before,
div:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition:all 0.8s;
}
div:before {
background: rgba(0, 0, 0, 0); /*this changes on hover - you might just want to change it here to get rid of the hover altogether*/
z-index: -1;
}
div:after {
z-index: -2;
background: url(http://placekitten.com/g/300/300);
}
div:hover:before{
background: rgba(0, 0, 0, 0.6);
}
<div>Hover to see effect</div>
So, in terms of your fiddle, add:
.movie_thumb_wrapper{
position:relative;
}
.movie_thumb_wrapper:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition:all 0.8s;
background:rgba(0,0,0,0.6);
z-index:-2;
}
jsfiddle example
Short answer, you can't. you need to create layers, using CSS position absolute, and z-index, so the text sits "on top of" the semi transparent layer. (instead of "inside" it as a a child element)
You can use pseudo element :after
div {
width: 200px;
position: relative;
border-radius: 5px;
text-align: center;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
opacity: .7;
right: 0;
bottom: 0;
z-index: -1; /* so that it goes in the backward */
background: url('http://placeimg.com/200/480/any')
}
<div>
<h1>Check my background image</h1>
</div>
instead of hex color code specify rgba and adjust a as required
background-color:rgba(255,0,0,0.5);
reference
Uhm,
background: rgba(0, 0, 0, 0.75);
does the job!
I'm using the following HTML / CSS to overlay a box on a website i'm working on. I want the box to center in the screen, not start based on the centering already going on. So basically the white box should be on the center of the page, not the text test
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.centrediv {
height: 200px;
width: 800px;
background-color: white;
border: 1px solid black;
}
<div class="loading"><div class="centrediv">Test</div></div>
Use transform: translate(-50%, -50%), top: 50% and left: 50% on .centreDiv to center it horizontally and vertically.
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: visible;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.centrediv {
position: absolute;
height: 100px;
width: 200px;
background-color: white;
border: 1px solid black;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
<div class="loading">
<div class="centrediv">Test</div>
</div>