I'm trying to make a "dynamic" background with divs rotating, I have a big image which, when rotated, makes the scroll bars bigger, is there anyway of displaying the image within the div, in the background, rotating but make it so it doesn't take up space/doesn't change scroll bars?
For the rotation I'm using css animations.
CSS
body {
background-color:rgb(80,0,0);
}
.rotating {
width:600px;
height:600px;
position:absolute;
top:-50px;
left:-100px;
background-color:rgb(0,0,255);
-webkit-animation:rotate 140s linear infinite;
}
#-webkit-keyframes rotate /* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
.content {
background-color:rgba(0,0,0,0.5);
margin:0 auto;
position:relative;
}
HTML
<div class='rotating'></div>
<div class='content'>test</div>
http://jsfiddle.net/kZW8j/
This is possible with little tweaking in your code. You can place the rotating div inside a bg div which is absolutely positioned and given the size of your document and by hiding its overflow.
Here is the code and your fiddle modified http://jsfiddle.net/kZW8j/2/
HTML
<div class="bg">
<div class='rotating'>
</div>
<div class='content'>test</div>
CSS
body {
background-color:rgb(80,0,0);
}
.bg{
position:absolute;
top:0;
left:0;
background-color:rgb(80,0,0);
overflow:hidden;
}
.rotating {
width:600px;
height:600px;
position:absolute;
top:-50px;
left:-100px;
background-color:rgb(0,0,255);
-webkit-animation:rotate 140s linear infinite;
}
#-webkit-keyframes rotate /* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
.content {
background-color:rgba(0,0,0,0.5);
margin:0 auto;
position:relative;
}
Jquery
function widthContainer()
{
var dw=$(document).width(), dh=$(document).height();
$(".bg").css({"width":dw, "height":dh});
}
$(document).ready(function(){
widthContainer();
$(window).resize(function(){
widthContainer();
});
});
I think this solves your issues. Let me know if you need any help.
You might also want to try working with z-index.
I got it working. The trick is to use z-index on .content and to put the rotating div inside a 0-size relative positioned div, also z-indexed. Overflow will still trigger.
http://jsfiddle.net/acbabis/gwN4H/
HTML
<body>
<div class="background-wrapper">
<div class="rotate"></div>
</div>
<div class="content">
<p>...</p>
<p>...</p>
</div>
</body>
CSS
.content {
width: 40%;
height: 100%;
position: relative;
padding: 10% 30%;
z-index: 10;
}
.background-wrapper {
z-index: 0;
position: relative;
height: 0;
width: 0
}
.rotate {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 200px;
top: 200px;
// Animation code removed
}
Related
This question already has answers here:
Darken image overlay and add text over it in CSS
(4 answers)
Closed 4 years ago.
I have an image class named image and a div named semitransparent.
i want to create a semitransparent background color in css, so that the image in image class can be seen through it
How to create this semi transparent color in css?
.semitransparent{
width:300px;
height:300px;
}
.image{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}
<div class="semitransparent">
<div class="image">
</div>
</div
You could use "position:absolute" to place the overlay - you'd need to find the position on the document and dimensions. But that can get annoying since you'd have to keep fixing it up as soon as the window dimensions change.
Have you heard of css-filter:blur?
Just have a class
.blur{ filter: blur(4px) }
and then add/remove that class to your image. Oh, wait .. not supported widely enough :-/
Depending on constraints you may have or could enforce there are a number of approaches to avoid having to fix up your overlay to keep matching the underlying elements position/dimensions.
.overlay{ position: absolute; width: 300; height: 300 }
.image{ position: relative; }
Then place the overlay inside the image DIV.
<div class="image"><div class="overlay"></div><img src="…" …></div>
It can be done using following code -
<div class="image">
<div class="semitransparent">
</div>
</div>
.semitransparent {
background: black;
opacity: 0.5;
position: absolute;
top:0; left:0; right:0; bottom:0;
}
.image {
background-image:url(https://picsum.photos/300/300/?random);
width:300px;
height:300px;
position: relative;
}
Fiddle link - https://jsfiddle.net/Lvhwmy31/
The thing is, the way you've started it.. it is not possible to make child element above the parent with z-index, what would be an obvious try of course.
It's sort of a css ninja style anyway :)
You would rather place them both as sibilings, give parent a relative, and overlay an absolute, and you're done.
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
<style>
.child1{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}
.child2{
background-color: rgba(138, 43, 226, 0.6);
width:300px;
height:300px;
position: absolute;
top: 0px;
}
.parent {
position: relative;
height: 2000px;
}
</style>
.full {
background: url(https://picsum.photos/200/300/?random) 0 0 no-repeat;
min-height: 300px;
}
.full {
background-size: cover;
position: relative;
}
.full:hover .overlay-effect {
opacity: 1;
cursor: pointer;
}
.overlay-effect {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: rgba(259, 67, 95, 0.7);
overflow:hidden;
}
.full a
{
color: #fff;
}
.full h3 {
padding: 15px 30px;
}
#media screen and (max-width: 368px) {
.full{margin-bottom: 10px;}
}
<div class="full">
</div>
</div
check this code, Change "rgba" color while you want.
<div class="semitransparent">
<div class="image">
</div>
</div
.semitransparent{
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.5);
}
.image{
background-image:url(https://picsum.photos/300/300/?image=206);
width:300px;
height:300px;
}
I want to add an transparent layer over my img on a card when I hover over it, I have done that part but I want it to be cut to the img and not cover the footer on the card. If that makes sence?
this is the card with Hover. As u can see on the card, the img just covers like 90% of the card, I want the hover overlay to do the same
Card when not hover IMG
Card when hover IMG
.card {
position:relative;
width: 350px;
height: 335px;
background-size: contain;
background-repeat: no-repeat;
background-color: #fff;
border-radius: 5px;
margin: 30px;
float: left;
}
#card_oslo{
background-image: url(img/oslo.jpg);
}
#card_oslo:hover{
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7);
transition: .5s;
}
You should use a pseudo-element for this. Use :after or :before and set it as full size also set the parent with position:relative; then change the opacity of the pseudo element on hover.
Working Demo.
.box {
position:relative;
}
.box:after {
content:"";
/* Set the element as full-size */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
/* Set bg and hide the element + animation */
background-color:#000;
opacity:0;
transition: all 0.5s ease 0s;
}
.box:hover:after {
/* Show the overlay on hover */
opacity:0.5;
}
/* For the demo */
.box {
width:200px;
height:200px;
background-color:red;
}
<div class="box"></div>
You can set the overlay to
position: absolute;
top: 0;
bottom: XXpx;
left: 0;
right: 0;
where XX is the footer height, then it will cover the whole card and leave the bottom x pixels free. You can also use % values instead of px.
If you want the overlay to contain text you need to put it into an extra div that you can then use as overlay.
I made a simplified version here https://jsfiddle.net/0L9fL1pj/
Been looking for a similar solution and since this thread never got a proper answer (neither proposed answer got me where I wanted and I doubt) but I got some important clues here and I thought I'd provide my current solution so anyone who has a similar problem can benefit.
I made a simple demo here: https://jsfiddle.net/Tdesign/2ynuajk0/14/
HTML:
<div id="imgBox2" class="shade">
<img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" width="350" height="335" loading="lazy" >
</div>
CSS:
#imgBox2 {
position: relative;
width: 500px;
}
.shade:hover::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 500px;
background-color: rgba(0,0,0,0.5);
}
I have a create two divs that overlap using z-index and the top one will shrink width ways but I can't get it to shrink from right to left even though I've added animation-direction:reverse;
EXAMPLE
How do I change the direction of the shrink?
animation-direction is irrelevant here. That property relates to css animations. You are using transitions. Two different things entirely.
Give .grow a right position value and wrap your current divs in a container with relative positioning:
WORKING DEMO
<div class="pos_rel">
<div class="holder"></div>
<div class="grow"></div>
</div>
.grow {
right:0;
}
Also, you probably should have the :hover on the parent element to prevent your mouse moving out of .grow as it transitions:
DEMO
.pos_rel:hover .grow {
width: 50px;
}
http://jsfiddle.net/venkat7668/a4DUv/2/
I have modified your code little bit to get your expected animation.
<div class="main">
<div class="grow"></div>
<div class="holder"></div>
<div>
.main {
position: relative;
width: 300px;
height: 300px;
}
.holder {
position:absolute;
width: 300px;
height: 300px;
background:#cccccc;
z-index:1;
}
.grow {
width: 300px;
height: 300px;
background: green;
-webkit-transition: width 5s;
transition: width 5s;
float:right;
position:relative;
z-index:2;
}
.grow:hover {
width: 50px;
}
We've hit a complete wall with this one, even though we think the solution is quite easy ...!
We have a responsive container div with width 100% and overflow:hidden. This container has a centered margin 0 auto div 'A' with fixed width 950px.
We want to place a max-width container 'B' next to this container with right:-3000px to place it off screen.
We will then use jQuery to animate opacity:0 the first container and animate right:0px the second container, bringing it in nicely from the right of the screen.
However, container B will not line-up next to the container A. It get's placed to the bottom right of the first container.
What do we need to do to get container B to line up next to container A?
Thanks in advance for any help! Here's the code:
HTML:
<div id="container">
<div id="A">Some content</div>
<div id="B">Some content</div>
</div>
CSS:
#container {
float: left;
overflow: hidden;
width: 100%;
}
#A {
margin: 0 auto;
max-width: 950px;
position: relative;
}
#B {
max-width: 715px;
padding-left: 220px;
position: relative;
right: -3000px;
z-index: 999;
}
change #B div's position to position:absolute;
Demo here
<div id="container">
<div id="A">A Some content</div>
<div id="B">B Some content</div>
</div>
<script type="text/javascript">
$( "#B" ).animate({
right: 0,
opacity: 1
}, 1500, "linear", function() {
alert( "all done" );
});
</script>
<style type="text/css">
#container {
overflow: hidden;
width: 100%;
height:50px;
position:relative;
background-color:orange;
}
#container > div {
position:absolute;
}
#A {
top:0;left:0;
margin: 0 auto;
max-width: 950px;
}
#B {
max-width: 715px;
padding-left: 220px;
right: -3000px;
z-index: 999;
background-color:green;
opacity:0.5;
}
</style>
Your issue is that you are simply animating the opacity of your first element, when this hits zero, although you cant see it- it is still present within the document layout with its original dimensions. Because B is below it in the DOM, when it slides in, it will be below the space taken by the (albeit) invisible A.
You may want to set display:none on A after the animation completes, or alternatively set its height to zero. This will ensure that as well as fading out, it isnt taking up space as you are anticipating, meaning B can assume the anticipated position.
You may want to use fadeOut(); on A instead of animating its opacity, this will automatically also apply display:none;
Pure CSS 'on hover' solution:
Demo Fiddle
HTML
<div class='wrapper'>
<div></div>
<div></div>
</div>
CSS
.wrapper {
position:relative;
}
.wrapper div:first-of-type {
height:200px;
width:100%;
background:blue;
position:relative;
opacity:1;
transition-delay:0;
transition-duration:1s;
transition-property:opacity;
}
.wrapper div:last-of-type {
height:200px;
position:absolute;
top:0;
left:0;
width:100%;
background:red;
width:100%;
max-width:0;
transition-delay:1s;
transition-duration:1s;
transition-property:max-width;
}
.wrapper:hover div:first-child {
opacity:0;
}
.wrapper:hover div:first-child + div {
max-width:100%;
}
Hi Folks Here is what i got in css:
#loading {
background:#000 url(loading.png) center;
opacity:0.5;
cursor:auto;
min-height:250px;
z-index:15;
}
#main {
padding: 10px;
z-index:1;
}
and in html:
<div id="loading">
<div id="main">Something here</div>
</div>
and i expect the loading.png to cover the div#main but it doesn't and "Something here" stays on the top of loading.png !?
Update: background is in CSS not an image in loading div.
Your HTML is wrong. The div main should be outside the div loading:
<div id="main">
<div id="loading"></div>
Something here
</div>
You also need to position the latter div using CSS so that it does not just push the main content out from underneath it, as well as sizing the div at 100% of its container's width and height:
#main { position: relative; }
#loading {
background: url("loading.png");
opacity: 0.5;
cursor:auto;
width: 100%;
height: 100%;
z-index:15;
/* Positioning */
position: absolute;
left: 0;
top: 0;
}