I am having a problem with using border-radius in combination with a hover state.
The hover state only should happen when the cursor is on top of the circle. So not when it's in the div's corner.
Example: http://tinker.io/e059c
It's seems to be impossible to do this, so a useful workaround is welcome.
From what you have mentioned,
The hover state only should happen when the cursor is on top of the
circle. So not when it's in the div's corner.
Here is the WORKING SOLUTION.
The HTML:
<div class='test'></div>
<div class="center"></div>
The CSS:
.test{
height:100px;
width:100px;
background-color:red;
border-radius:100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
position:absolute;
}
.test:hover{
background-color:blue;
}
.center{height:90px;
width:90px;
background-color:red;
border-radius:100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
position:absolute;
z-index:99;
top:5px;
left:5px;
}
I hope this is what you are looking for. Hope this helps.
Related
I have a div with class square and inside it, I have a div with class circle. The square has position: absolute and circle has position: relative. Also the circle is centered relative to the square div. But when I am rotating the circle using rotate, the circle loses it's center position and goes to somewhere random.
HTML
<div class="square">
<div class="circle">
Dark
</div>
</div>
CSS
.circle{
width:80px;
height:80px;
border-radius:50%;
border: 1px solid black;
position:relative;
left:50%;
top:50%;
display:grid;
place-items:center;
transform:translate(-50%,-50%);
cursor:pointer;
transition:all 0.6s linear;
}
.square{
width:120px;
height:50px;
border: 1px solid black;
position: absolute;
margin:50px;
cursor:pointer;
transition:all 0.6s linear;
}
.circle:hover{
transform:rotateZ(200deg);
}
.square:hover{
transform:rotateZ(360deg);
}
Can you guys tell me how to solve this issue and why is this behaving this way? I want to know about the problem and what is causing this behavior?
When you change transform, keep the previous states of the element like here:
.circle:hover{
transform:translate(-50%,-50%) rotateY(200deg);
}
Otherwise, translate will change top (0,0) as default.
I am trying this using border-radius but it doesn't seems like this image.
If you want to create circle, give same height and width to div and add border-radius property 50%.
.circle{
width:400px;
height:400px;
background:#000;
border-radius:50%;
}
<div class="circle"></div>
If your trying to make the black one a circle then just add the following css code to the class/id of the div. If your trying the whole image then add this css code to that particular id/class.(you can change the height and width if you want.)
#circle{
width:200px;
height:200px;
background:#000;
border-radius:100%;
}
<div id="circle"></div>
set border-radius: 50%;
Below is an example css code for a div
div {
height: 500px;
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: yellow;
width: 400px;
border-radius: 0% 50% 50% 0%;
}
I am trying to make div with inside marquee to put at the back of the div without marquee
I am having trouble in putting the marquee div at the back of the sphere div
how can I do it using CSS ? I already put z-index :-9999; in a moving div but seems not working
here is my code
HTML
<body>
<div id="container" >
<div id="sphere" >
<marquee>
<div id="moving">
</div>
</marquee>
</div>
</div
</body>
CSS
#container{
width:200px;
height:100px;
background-color:#000;
}
#sphere{
width:100px;
height:100px;
border-radius:50px;
background-color:#fff;
opacity:0.6; // i reduce the opacity of the sphere so I can see the moving div at the back
margin:auto;
z-index:99999;
}
#moving{
width:50px;
height:50px;
background-color:green;
margin-top:25px;
z-index:-999999;
}
to make things clear below image shows what I want to do
basically I just want to put the moving div at the back of the sphere
Thanks in advance
Add overflow: hidden; to #sphere.
#sphere {
width: 100px;
height: 100px;
border-radius: 50px;
background-color: #fff;
opacity:0.6;
overflow: hidden;
margin: auto;
z-index:99999;
}
CSS: overflow
I need to implement a design to my webpage butI am kind of newbie with CSS.
What I am trying is to add a frame above the user picture. For example, for any size of image, I want that a given profile image like:
... I want to add a rectangle with a transparent circle inside like:
... so the final result would be like:
I am currently adding this frame as an image an resizing the user's image but it decreases resolution.
I really need the frame height size to be equal the image height size and put a frame and circle according to the user image.
Any Ideas?
Here try this DEMO. To check transparency, try changing body color.
<div class="outerCont">
<div class="innerCont centerAlign">
<img src="http://i.stack.imgur.com/FjDS6.png"/>
</div>
</div>
.outerCont{
height:300px;
width:300px;
position:relative;
overflow:hidden;
}
.innerCont{
background-color:transparent;
border:150px solid rgb(186, 230, 255);
border-radius:50%;
height:200px;
width:200px;
overflow:hidden;
}
.innerCont img{
position:absolute;
height:80%;
bottom:0;
left:50%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
.centerAlign{
position:absolute;
left:50%;
top:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
}
Well, there are 2 ways:
1)
HTML:
<div class="profile_pic_cont">
<img src="img/profile_pic.jpg" class="profile_pic" />
</div>
CSS:
.profile_pic_cont {
width: 100px;
height: 100px;
background-color: #d2e8f7; /* light blue */
padding: 5px;
}
.profile_pic {
border-radius: 9999px;
}
or
2)
HTML:
<div class="profile_pic_cont">
<img src="img/profile_pic_frame.png" />
</div>
CSS:
.profile_pic_cont {
width: 100px;
height: 100px;
background: #fff url('./img/profile_pic.jpg') no-repeat top left;
}
HERE IS THE JSFIDDLE
.circle {
background-color:#fff;
border-radius: 50%;
width: 250px;
height: 250px;
text-align:center;
background-image:url('http://i.imgur.com/NGz1YlF.png');
background-repeat:no-repeat;
background-size:65%;
background-position:center bottom;
}
You should draw the square, then the circle on top of it and finally put the image, this will produce the result you want.
Check there for how to trace a circle in CSS.
In my website i want to show profile pictures are in a circle shape ina particular area. In my folder it is in rectangular page. For that i am using following styles but not not working
<div class="circle">
<img src="~/Content/Member/MemberPhotos/default_user_icon.jpg"/></div>
</div>
tried to mask with a shape image
.circle {
width:100px;height:100px;
overflow: hidden;
-webkit-mask-image: url(crop.png);
}
and also tried the following css
.circle {
width:100px;
height:100px;
border-radius: 50px;
background-color:#000;
clip: rect(0px,50px,100px,0px);
}
both are not masked. anybody please help me
<div class="circle">
<img src="~/Content/Member/MemberPhotos/default_user_icon.jpg" style="border-radius: 50% 50% 50% 50%" />
</div>
That should do it.
Border radius would be the best solution.
If you want to support IE8 then you will have a problem because it doesn't support border-radius. So your solution with mask would be more appropiate. Or maybe sometime in the future you will want to use a mask with another effect, other than circle. So here is a solution:
.circle{
width:100px;
height:100px;
position:relative;
}
.circle:after{
content:"";
width:100px;
height:100px;
left:0px;
top:0px;
background-image:url(crop.png);
z-index:5;
}