I'm trying to remove blur effect that is happening during scaling transition. Picture during transition is passable but this font transition is so ugly... Is there any method to fix it? I have tried with "translateY(0) translateZ(0)" but no effect at all. When the effect is done, everything is going back to normal.
.circlee
{
display: inline-block;
margin-right: 50px;
/*margin-top: 200px;*/
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px black solid;
background-image: url(http://lorempixel.com/200/200/);
transition: all 1s ease-in-out;
}
.circlee:hover
{
transform: scale(1.15);
}
<div class="circlee">wwww</div>
<div class="circlee">xxxx</div>
<div class="circlee">ssss</div>
From the looks of it your image is only 200px by 200px . The hover effect is causing the image to stretch which results to quality loss / blur. You can either get a higher quality image so when it stretches it doesn't lose quality for an example ...an image of 210px by 210px with a resolution of 72 pixels . OR you could make your circle 190px by 190px and scale it up to 200px on hover resulting in the exact size of your background image.
OR just change the width and height on hover instead. Example:
.circlee
{
display: inline-block;
margin-right: 50px;
/*margin-top: 200px;*/
width: 190px;
height: 190px;
border-radius: 50%;
border: 2px black solid;
background-image: url(http://lorempixel.com/200/200/);
background-size:100% 100%;
transition: all 1s ease-in-out;
}
.circlee:hover
{
width:200px;
height: 200px;
}
<div class="circlee">wwww</div>
<div class="circlee">xxxx</div>
<div class="circlee">ssss</div>
Works like butter!
Related
I'm seeking for some advice on creating a "ring" shape in CSS. Here's some important detailed goals I need to achieve:
the ring border thickness must be a percentage number, not rm or absolute pixel number, so that the ring shape can be fully responsive based on container size;
The ring border need to have a background, for my scenario, the background could be sometimes a combination of 3-4 solid colors, or a gradient color;
The filling of the ring must be transparent so user can see the background through it.
Here's a quick example:
Here are a few attempts I used:
Make a border-radius: 50% div with only border width but soon I noticed the border width cannot be a percentage number;
SVG clipping a round div to a ring shape. so far I was not able to successfully make it working... If this is the right approach, please share some snippet.
You can achieve this considering mask where the idea is to use a radial-gradient to create the hole and use fixed value which will make the visible part (the thickness) to be responsive.
.box {
border-radius:50%;
background:linear-gradient(red,purple,orange);
-webkit-mask: radial-gradient(transparent 89px,#000 90px);
mask: radial-gradient(transparent 89px,#000 90px);
}
.box:before {
content:"";
display:block;
padding-top:100%;
}
.container {
margin:0 auto;
max-width:200px;
animation:change 3s linear alternate infinite;
}
#keyframes change{
to {
max-width:400px;
}
}
body {
background:linear-gradient(to right,yellow,pink);
}
<div class="container">
<div class="box">
</div>
</div>
Making responsive rings in CSS is tough. The best I've found is to simply create two circles stacked on top of each other where the top circle's background is the same as the container background. You could do this with 2x elements like in my example or with a pseudo-class.
Pros:
You get lots of control
Easily add other content (like pie charts) since the content is "masked"
Cons:
Background needs to be a flat color and nothing will show through the ring
.outer {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
background-color: #9273B0;
margin: 10px;
cursor:pointer;
}
.inner {
position: absolute;
width: 50%;
height: 50%;
border-radius: 50%;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease-out;
}
.outer:hover .inner {
width: 90%;
height: 90%;
}
<div class="outer">
<div class="inner"></div>
</div>
If you MUST see the background through the ring, I'd look into a SVG clip path but that gets really complicated pretty quick.
In order to maintain percentage values you can try using a radiel-gradient. However the borders tend to get a little choppy looking.
.circle {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
color: #fff;
height: 100%;
width: 100%;
border-radius: 50%;
background: radial-gradient(ellipse at center,
rgba(255,113,12,0) 60%,
rgba(255,113,12,1) 51.5%);
}
Example: https://codepen.io/SROwl/pen/BMEJzj
You could use vw or vh as a metric. The border-width will be calculated based on the viewport width or height depending what you choose. You'll have to do some calculation of what value you want to use:
.ring {
border: 10vw solid red;
border-radius: 50%;
height: 100%;
position: absolute;
width: 100%;
}
https://codepen.io/anon/pen/ErJbxN?editors=1100
With JS: https://codepen.io/anon/pen/rPbYvm
I have a round image (a .png file) which is transparent in the middle. I need to make the background inside the image a solid color. To do this, I made the background solid, and then put border-radius:50%, but this creates an ugly small white line. Is there anyway to get rid of this, or would I have to manually color the image in an image editor?
div {
width: 500px;
height: 500px;
background: black;
}
div img {
margin: 100px;
max-width: 50%;
background: white;
border-radius: 50%;
}
<div>
<img src="http://i.imgur.com/sDU7Lhz.png">
</div>
Fiddle here: https://jsfiddle.net/h3nwkoe1/
The problem is not with the image. The image is a transparent one and has no background to it at all. The problem is caused by the background: white and the border-radius: 50% added to the image element. It is due to the anti-aliasing pixel in browsers and is the same issue described in this thread.
The solution would be to use some method to fill the background partially to the element and not fully (that is, just enough to cover till the black circle that is already present on the image). Since the img tag cannot have pseudo-elements (atleast it won't work cross-browser), the best option is to use a radial-gradient for the background like in the below snippet.
Note: The thick green border is only for demo and can be removed without any side effect.
div {
width: 500px;
height: 500px;
background: black;
}
div img {
margin: 100px;
max-width: 50%;
background: radial-gradient(circle at center, white 60%, transparent 61%);
border-radius: 50%;
overflow: hidden;
border: 4px solid green;
}
<div>
<img src="http://i.imgur.com/sDU7Lhz.png">
</div>
I totally agree with Harry's explanation.
Another workaround could be to enclose the image in a div slightly smaller than the image (like 1px on each side), so that the circle formed using border-radius is smaller than the external black circle on the image.
It is a bit messier than the solution proposed by Harry. But it could be an alternative to gradient.
div#black {
width:500px;
height:500px;
background:black;
border: solid black 1px;
box-sizing: border-box;
}
div#circle {
margin: 100px;
width: 250px;
height: 250px;
background: white;
border-radius: 50%;
text-align: center;
}
div#circle img {
width: 252px;
height: 252px;
margin-left: -1px;
margin-top: -1px;
}
<div id="black">
<div id="circle">
<img src="http://i.imgur.com/sDU7Lhz.png">
</div>
</div>
I want to display images as circle on my webpage. For that, I have an image set as background wrapped inside a div container. Both the divs (outer and inner) have been given a border radius of 50% to achieve this. I also want the image to zoom in oh hover, for which I have applied transform:scale on the inner div.
The image is getting clipped a bit from left and right sides so it doesn't appear as a perfect circle. However, when the image gets scaled up on hover, the image forms a perfect circle. I have tried re-positioning it with background position, tried using a bigger image, increased/decreased size of both divs, but no method is working.
Further, when the image gets zoomed in on hover (using transform:scale), it gets re-positioned slightly after the transformation is complete. Strangely, if I remove the transition effect (transition duration and transition-timing-function), then this re-positioning doesn't happen.
Can anybody figure out why this is happening and what is the solution?
I am using bootstrap (I know it has a class img-circle which draws circle, but I wish to use my own code).
You can see the code running here: http://jsfiddle.net/dk49/h9KZr/
Observe the clipping of image on left and right sides of the circle and how it gets into correct shape on hovering over it. You can also see the jittering of image on zooming when hovering over it.
<div class="container-fluid page-content-wrapper">
<div class="col-xs-12 col-sm-4">
<div class="circle-container">
<h2 class="img-header">Men</h2>
<div class="inner-circle img-men"></div>
</div>
</div>
</div>
CSS:
.page-content-wrapper {
max-width: 980px;
margin-left: auto;
margin-right: auto;
background-color: #000;
}
.circle-container {
max-width: 325px;
max-height:325px;
border-radius: 50%;
overflow: hidden;
position: relative;
margin: 20px auto 0 auto;
z-index: 5; /* for fixing chrome bug */
}
.inner-circle {
width: 100%;
height: 100%;
padding-bottom: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
transition: transform 0.15s ease-in-out;
}
.inner-circle:hover, .inner-circle:active {
transform: scale(1.1);
}
.circle-container:hover .img-header, .circle-container:active .img-header{
bottom: 30%;
background-color: rgba(255,255,255,0.9);
}
.img-header {
color: #fff;
bottom: 10%;
position: absolute;
width: 100%;
color: #000;
background-color: rgba(255,255,255,0.7);
font-size: 25px;
font-weight: 500;
padding: 7px;
text-align: center;
height: 43px;
vertical-align: middle;
z-index: 1;
transition: bottom 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.img-header:hover ~ .inner-circle, .img-header:active ~ .inner-circle {
transform: scale(1.1);
}
.img-men {
background: url(http://s8.postimg.org/qohfig4md/men.png) center center no-repeat;
background-size: contain;
}
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 would like to shrink the size of an image when the mouse hovers over it. I would like to use CSS3 animations if possible. This is what I am currently doing:
#logo-icon img { width: 80px; };
#logo-icon img:hover { width: 50px; transition: width 0.2s; };
When the mouse hovers over the image, instead of it transitioning from an 80px width to a 50px width, it is transitioning from a 0px width to a 50px width.
Is it possible to get it to transition from 80px to 50px?
Try:
#logo-icon img { width: 80px; transition: width 0.2s;};
#logo-icon img:hover { width: 50px; };
http://jsfiddle.net/CxU5g/