Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Many weeks have been spent trying to find how one could make this shape, it needs to be just this shape, hoping for something no overlays that makes it appear like the shape, but instead just slanting the rectangle.
#parallelogram {
margin: 0 auto;
width: 50%;
height: 100px;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
background: blue;
}
<div id="parallelogram">
</div>
#shape {
width: 300px;
height: 75px;
background-color: blue;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
margin: auto;
}
<div id="shape"></div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
Here's is link to a website http://newworldorder.com/ , whenever I load the page, I see the background zoom in for like 2 seconds, is it possible to achieve this with css? If yes, how can I do it?
Maybe something like this? Although, it resets to 1x scale at the end.
<style>
div {
background-image: url("https://images.unsplash.com/photo-1547898812-9e25c5a693e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1936&q=80");
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
background-position:center-top;
background-position-x: 50%;
background-position-y: 0%;
-webkit-animation: zoomin 5s 1;
}
#-webkit-keyframes zoomin {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
}
}
</style>
<body>
<div style="position:absolute;top:0;bottom:0;left:0;right:0;"></div>
</body>
I don't know what you are really asking, but this might be what you are looking for:
html, body {
background: url("http://placehold.it/200x200") top center no-repeat;
animation: animateBg forwards 2s ease-in;
}
#keyframes animateBg{
from { background-size: 200px; }
to { background-size: 100%; }
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am setting up a new website, and I want to add a CSS hover effect. Can you tell me what to do? I want my image has a zoom hover effect.
.zoom {
padding: 50px;
box-sizing: border-box;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" ></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
It is possible to achieve this footer only with css?
Thanks
Please try this:
.container {
background: yellow;
height: 180px;
width: 400px;
}
.box {
width:400px;
height:80px;
background-color: white;
border:1px solid white;
border-width:0 0 13px 0;
margin:1rem auto;
-webkit-border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
-moz-border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
}
<div class="container"><div class="box"></div></div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
Is it possible to make 2 picture overlap this way ?
Imagine you have 2 images both like 60% of the resulting image. They should overlap, but by a diagonally cutout.
Either you use CSS Masking or you play around with CSS3 transform rotate:
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
You would rotate one inner container by say 45 degrees and the image inside that container by -45 degrees to make it straight again. The result is a diagonal border. Add z-index and absolute positioning and you got your result.
Here's a demo.
.container {
width: 500px;
height: 200px;
margin: 50px;
overflow:hidden;
position: relative;
border: 2px solid #666;
}
.img1 {
border-right: 2px solid #666;
position: absolute;
width: 300px;
height: 600px;
overflow: hidden;
left: -75px;
top: -230px;
z-index: 2;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.img1 img {
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
.img2 {
position: absolute;
width: 350px;
overflow: hidden;
left: 150px;
z-index: 1;
}
<div class="container">
<div class="img1"><img src="http://lorempixel.com/output/city-q-c-600-300-7.jpg" /></div>
<div class="img2"><img src="http://lorempixel.com/output/city-q-c-600-300-10.jpg" /></div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a div in the sidebar. The whole div is a link which takes you to another part of the website.
Now, there is this small flower like image in the left side of the div, background image. When you hover the div the flower should
rotate
fade in and out.
If I apply the animation on the entire div, the div will rotate, not the background image. So I solved it like this: the flower is in an absolutely positioned div and rotates and fades in and out continuously (if I apply the animation to the :hover then it rotates only when I hover directly on the image.)
Is this what you want?
http://jsfiddle.net/kgFdJ/2/
#foo {
width: 300px;
height: 500px;
background-color: #eee;
position: relative;
}
#foo:after {
content: "";
width: 20px;
height: 20px;
background-color: #f00;
position: absolute;
top: 10px;
left: 10px;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s
}
#foo:hover:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
But be aware that using a pseudo selector to another pseudo selector could get a little buggy in some browsers, so instead you can do something like this:
HTML
<div id="foo">
<div class="flower"></div>
</div>
CSS
#foo:hover > div.flower ...