I have an image spinning on my page using CSS animation transforms. The problem is when I reduce the page width I get a horizontal scroll bar that's constantly changing sizes. How can I keep the spinning image but have the parent container cut off the sides when it starts expanding outside of the page width?
I've tried changing the image to a background-image in the rays div but then I lose the effect completely.
See the below minified example.
#rays-container {
width: 100%;
max-width: 490px;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 0;
}
#rays {
width: 100%;
height: 100%;
}
#-webkit-keyframes rays {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-ms-keyframes rays {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
.spin {
-webkit-transform-origin: center center;
-webkit-animation: rays 60s infinite linear;
-ms-animation: rays 60s infinite linear;
-ms-transform-origin: center center;
}
<div id="rays-container" class="spin">
<div id="rays">
<img src="https://s-media-cache-ak0.pinimg.com/736x/af/97/ee/af97eef70a8bce541b19c6a41178a015.jpg" style="width: 100%; height: 100%;">
</div>
</div>
CodePen
The scroll bars you're seeing are because the content inside it is larger than its width (that's the obvious part). That being said, one way of fixing it would be to add overflow-x: hidden; to the CSS of the parent of your element with class="spin", which in this case is the <body>.
body {
overflow-x: hidden;
}
Overflow is the CSS property that defines what will happen if the content doesn't fit. The value hidden tells it to simply clip the content, and not display any scroll bars.
For more info, here's the MDN page on CSS overflow.
Try adding padding to the #rays class, like so.
#rays {
padding: 100px;
/* as suggested by Matheus Avellar */
overflow: hidden;
/* width: 100%; */
/* height: 100%; */
}
Code Pen
Related
screenshots of desktop working vs. mobile not working
I have a code snippet to show what I'm trying to do. I have intentionally set a wider width to a heading that is inside a div containing a slideshow. I want the width of the heading to be clipped by the rounded edge of the image. I have something similar working on desktop browsers, but it doesn't render in Safari or Chrome on my iphone. I had set overflow: hidden to the parent div, which did hide the outer parts of the heading like I intended. But I can't get it to render properly on mobile devices. (Note: overflow hidden is hiding everything in the snippet, and I'm not sure what's going on there either).
I have researched similar questions, but those seem to be dealing with overflow issues concerning the body of an entire page.
div {
position: relative;
/* overflow: hidden; */
}
h3 {
margin: 0;
z-index: 4;
width: 300px;
height: 20px;
position: absolute;
/* top: 150px; */
bottom: 0;
left: 0;
right: 0;
background-color: yellow;
text-align: center;
}
img {
position: absolute;
top: 0;
left: 0;
z-index: 3;
animation: slideshow 12s linear 0s infinite;
border-radius: 25px;
}
img:nth-child(2) {
z-index: 2;
animation-delay: 4s;
}
img:nth-child(3) {
z-index: 1;
animation-delay: 8s;
}
#keyframes slideshow {
25% {
opacity: 1;
}
33.33% {
opacity: 0;
}
91.66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div>
<h3>Slideshow</h3>
<img src="http://dummyimage.com/280x200/56AD30/fff.png&text=1" />
<img src="http://dummyimage.com/280x200/1560f0/fff.png&text=2" />
<img src="http://dummyimage.com/280x200/C03229/fff.png&text=3" />
</div>
I see it now that you added the images. You have a margin problem there. The h3 element adds margin. If you add 'margin: 0' to your h3 style you will see what happens. One more thing, you need to remove 'top: 150px;'.
And you have to put some working code next time. In the example you added you cannot see anything at least you add a height value to the main div.
Currently I am using css in squarespace to try and make image captions cover the entire image on hover, but because of some of squarespace's code I can make it cover the bottom portion of the image.
Here is the website page I am editing:
https://baikart.com/3rdall
And here is the code I have so far to change the caption:
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper {
position: absolute;
color:#fff;
top: 0%;
bottom: 10%;
left: 0%;
right: 0%;
opacity: 0;
transition: all .5s ease;
transform: translate(-0%,-0%);
-webkit-transform: translate(-0%,-0%);
-ms-transform: translate(-0%,-0%);
-moz-transform: translate(-0%,-0%);
}
Thank you in advance!
When you look using element inspector in chrome dev tools or something you can see that there is a max-height: 75% being applied to the caption class. You would need to change this to 100% in your css.
This is what is in element inspector
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption-wrapper {
max-height: 75%;
opacity: 1;
visibility: visible;
}
Remove max-height from here
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption-wrapper {
max-height: 75%;
}
and set height: 100%.
I have a container that contains a div inside it. By clicking on that div square, it begins moving and ends up being outside the container.
My problem is that this inner block is being trimmed out really harsh while going beyond the borderline. How could this transition be done more smoothly using CSS means? I want to get an effect when this square disappearing becomes gentle for the eyes.
Maybe I'm supposed to use some kind of an image mask for the main container or a fade effect for the square. I'm not exactly sure how to achieve that behaviour.
Thank you in advance!
Codepan sandbox
.borderline {
position: relative;
text-align: center;
vertical-align: middle;
line-height: 150px;
width: 400px;
height: 150px;
overflow: hidden;
}
.square {
position: absolute;
width: 150px;
height: 150px;
background-color: #0087ff;
}
.square:focus {
transform: translateX(500px);
transition: all 2s;
}
<div class='borderline'>
<div class='square' tabindex="1">Click me</div>
</div>
maybe you could add an animation to your css with opacity like:
.square:focus {
transform: translateX(500px);
transition: all 2s;
animation-name: example;
animation-duration: 1s;
}
#keyframes example {
0% {opacity:1}
50% {opacity:1}
100% {opacity:0}
}
https://codepen.io/anon/pen/rzppON
Goal
I would like to create an animated polygon which has parts of it trimmed/cut/masked out so the layer/element/background under it can be seen like this:
I created an animation with CSS3 transform. It is a rotating block that looks like its bottom parts are trimmed down while moving. I would like the trimmed part to show what is actually behind/under the rotating block (so its background).
What I tried
Illusion solution
For single color backgrounds, you can just add a shape on top of the animation so it have the illusion of being cut off.
This obviously doesn't work with pictures:
Limited solution
If you need to cut off the sides in with a rectangular shape, you can do that by a parent element, but this has obvious limitations. How to do something like this but with an arbitrary polygon? Can you mask in CSS?
body {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQYV2NMqL7ty4ADMIIkF7SqbsYmP+gkAbAbGgsk/ddhAAAAAElFTkSuQmCC);
}
.center {
width: 200px;
margin: 0 auto;
padding-top: 50px;
height: 100px;
overflow: hidden;
}
.block {
height: 100px;
width: 100px;
background-color: red;
z-index: -1;
transition: transform 1000s 0s linear;
margin-left: 50px;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate {
animation: rotating 2s linear infinite;
}
<div class="center">
<div class="block rotate"></div>
</div>
to trigger z-index, you need to reset position to either: relative, fixed or absolute.
DEMO
#mask {
height: 100px;
width: 100px;
background-color: white;
z-index: 1;
position:relative;/* to trigger z-index */
}
To look like last example, background-position can be efficient.
DEMO box cut off from background
basicly:
body {
background: url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
background-size:100vw auto;
background-repeat: no-repeat;
}
#mask {
height: 100px;
width: 100px;
background:url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
background-size:100vw auto;
z-index: 1;
position:relative;
}
Unfortunately, this won't work with background-size:cover; since body and #mask have different size. background-size will need to be set via javaScript onload and onresize for #mask.
Have you tried to make the white box invisible with bigger z-index than the red box ?
Here you go: http://jsfiddle.net/QxG74/2/
Cute kitting version: http://jsfiddle.net/DpfW7/1/
Give the center div a height of 100 pixels and set the overflow to hidden. This way the rotating square get's trimmed at the bottom.
#center {
width: 200px;
height: 100px;
overflow: hidden;
}
I have this code for my image to nicely slide in to my website from the right side.
img.move
{
position:relative
-webkit-animation-name: image;
-webkit-animation-iteration-count: once;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 1s;
}
#-webkit-keyframes image {
0% {
right:-708px;
}
100% {
right: 0;
}
}
So right now in my webpage, this image starts in the right side background (it's gray) and ends up in its correct position in the container (it's white). What I want to do (but have no idea how to) is to make the image appear from thin air. What I mean is that it would still have its sliding animation, but it would be invisible on the gray part, and only appear out of white part, like the corner of container was printing it. So I wonder, is there any way I could do it?
Thanks for help
EDIT: JSFIDDLE http://jsfiddle.net/EpCM7/
Okay what I am doing is making the image a child of the div.parent.
Then I apply overflow: hidden; to the parent. When the image slides in from outside of it's parent it will not be visible due to the style.
The html:
<div class="parent">
<img class="move" src="http://vabankbroker.com/templates/vabankbroker/images/2.jpg" style="margin-right: -3px;" />
</div>
The css:
div.parent {
width: 100%;
height: 100%;
overflow: hidden;
}
The Fiddle: JSFIDDLE, remove /show in url to view code
Better Practice
#-webkit-keyframes image {
0% {
left: 100%; /* removes the use of negative values */
}
100% {
left: 0;
}
}
try adding opacity to the animation . might be the effect your looking for
#-webkit-keyframes image {
0% {
opacity: 0;
right:-708px;
}
100% {
opacity: 1;
right: 0;
}
}