Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have been trying to run some simple css experiments for transitioning shapes created with css.
I can do it with jQuery just fine, but I am trying to keep things as light weight as possible for the the actual project I have in mind. I've been using Google quite a bit (and W3schools) to brush up on all of this, but I am starting to wonder if everyone is just using jQuery these days.
Anyway. I want to expand a circle to look more like capsule. The code is below.
http://pastebin.com/piXXrmEu
Not sure what I am missing. Just need the circle to gain a width of 700px. It's not currently working in any browser. Though it needs to work in all IE browsers.
Not sure on what event you want the circle to expand, but here is an example of a circle expanding to a 'capsule' shape onHover just using CSS: https://jsfiddle.net/1cdatxq2/
#circle {
width: 300px;
height: 300px;
background: orange;
-moz-border-radius: 300px;
-webkit-border-radius: 300px;
border-radius: 300px;
transition: width .5s;
}
#circle:hover{
width: 700px;
}
More flexible will be variant with animation, i think
#circle {
width: 150px;
height: 150px;
background: orange;
border-radius: 300px;
animation: run 2s
}
#keyframes run {
0% {
width: 200px
}
25% {
width: 300px
}
50% {
width: 400px
}
75% {
width: 500px
}
}
Example here
Related
I am creating a website for a project and got stuck with an issue.
I was trying to implement the hover feature, where when I hover over the image it gets zoomed in. That part works nicely, however, I was having an issue when I hover over the last book in the first row. When I hover over that, the entire screen becomes glitchy. This feature is not working as I hoped, i.e. smooth and good to work with. I have attached the image and the code I have.
Thanks for any help!
.books img{
width:200px;
height:300px;
}
.books img:hover {
position: relative;
left: 45px;
width: 300px;
height: 400px;
display: block;
}
I found some code online using -mox-transform and -webkit-transform, however, I have never worked with that before. This seemed complex for me. Any suggestions if I should learn how that works instead of perfecting the above code?
By increasing the width and height on hover the surrounding layout must adapt to that size change. The browser must move the surrounding elements to provide the space for the larger element, that is why it is glitchy.
If you want to do it properly, you will probably have to use transform, as you mentioned.
For your use case it should not be hard. Try this:
.books img {
width: 200px;
height: 300px;
transition: transform 200ms; /* optional transition with 200ms duration */
}
.books img:hover {
transform: scale(1.1); /* scale to 110% */
}
All you need to use is scale property to scale the image. Change your code to this
.books img:hover {
transform: scale(1.5);
}
This should do what you are looking for.
Use transform CSS Property with scale() which is used to increase or decrease the size of an element
.books img:hover {
transform: scale(1.2);
}
Looking to do a Parallax Effect on a skewed background. Had a look around on Google and the likes and can see everyone is doing this with an image. Just wondering if anyone has come across a solution where you can do this with a solid colour?
The reason I ask, Is that my design is a solid colour, However the background is using CSS3's Skew to transform the angle.
My current CSS (If it's any use) is as follows :
.diagonal {
transform: skew(0deg, 2deg);
background: #2188c9;
margin-top: -200px;
padding-top: 200px;
height: 220px;
}
.diagonal .content {
transform: skew(0deg, -2deg);
z-index: 1;
}
I've made a jsFiddle for this too.
If it's not achievable. I don't mind making a blue background image in its place.
Thanks
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have this transition issue with a circle container set to overflow:hiddenand an image in it set to scale up on hover with a css transition: all 1s ease.
It's not working correctly in Web-kit browsers (i tested in Chrome and Opera)
the problem seems that while the scaling is preforms the parent container's overflow:hidden takes a break and snaps back when the transition is over, this however only effects the image's border-radius and the original form of the image (the box) is reveled for as long as it takes to get the scaling done.
In other browser it works fine. (FF, Edg, IE)
See sample here:
https://jsfiddle.net/s7qeb4rL/13/
Is this a Web-Kit bug or is it just the way images are rendered in web-kit for the long haul.
try this code...
.circle{
float:left;
width:19vw;
height:19vw;
border-radius:50%;
overflow:hidden;
margin:2.2vw;
display:block;
position: relative;
border:10px solid rgb(96, 67, 58);
}
.contain-pic-nyn{
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
overflow:hidden;
transition: all 1s ease;
}
.contain-pic-nyn img{
width: 100%;
height: 100%;
}
.circle:hover .contain-pic-nyn{
overflow:hidden;
right: -20px;
left: -20px;
top: -20px;
bottom: -20px;
transition: all 1s ease;
}
<body>
<div class="circle">
<div class="contain-pic-nyn">
<img src="http://lorempixel.com/400/400/sports/" alt="picture"width="100%" height="100%">
</div>
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I want to add a background ribbon inside a div without images with only pure CSS.
I tried using :after and :before but didn't have any luck.
The ribbon is green, and must be same as below:
http://i.stack.imgur.com/eJsj9.png
Anyone here that can help me? Remember - my div can grow in height with the content.
I applied some transforms on the :after pseudo-element. Here's how:
.ribbon {
background: #04F;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.ribbon:after {
content:' ';
position: absolute;
background: #0F4;
width: inherit;
height: inherit;
padding: inherit;
top: 0;
right: -70%;
-webkit-transform: skew(-15deg, 0deg);
-moz-transform: skew(-15deg, 0deg);
transform: skew(-15deg, 0deg);
}
Just work with the padding, text-align and colors to achieve the exact effect.
My issue is that during CSS transition border-radius temporarily stops clipping elements inside if transition of overlapping element involves transform. In my case I have two divs absolutely positioned one above the other where the first one has transition triggered by action on clicking a navigation element inside the second one, like:
<div id="below"></div>
<div id="above"><div id="nav"></div></div>
The above div has border-radius: 50% and clips the nav div. In CSS it goes like (minimal example, original onclick action illustrated as :hover):
#below {
position: absolute; width: 250px; height: 250px;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
#below:hover {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#above {
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
overflow: hidden;
}
#nav {
width: 40px;
height: 200px;
background-color: rgba(0,0,0,0.3);
}
Of course it is better visible in http://jsfiddle.net/UhAVG/ with some additional styling for better illustration.
This works as expected in IE10+ and FF25, also in Chrome 31 and 32 with hardware acceleration disabled. In result only accelerated Chrome shows this unwanted behaviour. So I'm wondering if it's possible to workaround it somehow using current CSS3 techniques.
After some more experiments I've finally found the solution. Sometimes simple ones are the hardest to find. In this case #above {z-index: 1;} (like in http://jsfiddle.net/UhAVG/1/) solves the issue. Wild guess is that z-index prevents some optimization that combines operations from single layer and doing so mistakenly optimizes out applying border-radius on element. With layers separated this is no longer the case.