Create a circular div that fills in when hovered over using CSS

I attempted to create an interesting effect when hovering over a circular div, but I struggled to figure out how to fill it in with the same round shape.

Currently, the fill is in a square shape, but I am looking to have it match the shape of the div (which is round in this instance). Is there a way to achieve this using CSS?

.circle {
  height: 50px;
  width: 50px;
  margin: 35px;
  border: 3px solid blue;
  background-image: linear-gradient(blue, blue);
  background-repeat: no-repeat;
  transition: background-size .5s, color .5s;
  background-size: 0 0;
  background-position: 50% 50%;
  border-radius: 30px;
}

.circle:hover {
  background-size: 100% 100%;
  color: blue;
}
<div class="circle"></div>

css

Answer №1

Utilize either the radial-gradient method or the box-shadow technique

  • box-shadow

.circle {
  height: 50px;
  width: 50px;
  margin: 35px;
  border: 3px solid blue;
  background: blue;
  transition: box-shadow .5s, color .5s;
  background-size: 0 0;
  background-position: 50% 50%;
  border-radius: 30px;
  box-shadow: inset 0 0 0 50px white
}

.circle:hover {
  box-shadow: inset 0 0 0 0px white;
  color: blue;
}
<div class="circle">
</div>

  • radial-gradient

.circle {
        height: 50px;
        width: 50px;
        margin: 35px;
        border: 3px solid blue;
        background-image: radial-gradient(circle at center , blue 50%, transparent 50%);
        background-repeat: no-repeat;
        transition: background-size .5s, color .5s;
        background-size: 0 0;
        background-position: 50% 50%;
        border-radius: 30px;

    }

.circle:hover {
    background-size: 200% 200%;
    color: blue;
}
<div class="circle">
</div>

Answer №2

Enhance your design by incorporating a circle and animations using a pseudo element.

.circle {
  height: 50px;
  width: 50px;
  border: 3px solid blue;
  border-radius: 50%;
  margin: 35px;
  position: relative;
}

.circle:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  background: blue;
  border-radius: 50%;
  width: 0;
  height: 0;
  transition: all .5s;
}

.circle:hover:before {
  width: 100%;
  height: 100%;
}
<div class="circle"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reverse the orientation of the SVG image, for instance, the graph

I've been experimenting with creating a bar graph using SVG, but I'm struggling to understand how it works. I tried rotating an existing graph upside down, but there seems to be a small offset. You can view the corresponding jsfiddle here - http: ...

csshtmlsvg

Challenge with shifting list items

The issue arises when applying margin to any element within the product or slider div, causing all list items to shift downwards. .product-slider { margin-top: 16px; text-align: center; } .slide-item { list-style-type: none; display: inline; ...

htmlcsshtml-lists

Matching utility types and themes in Tailwind CSS

I encountered an issue while trying to implement the Tailwind plugin in my project. It seems that a TypeScript error has occurred. I'm curious about the data types of matchUtilities and themes. Can someone provide some insight? const plugin = require( ...

javascriptcsstypescripttailwind-css

Elements are unresponsive to scrolling inputs

My Ionic 2 input elements are not scrolling to the top when the keyboard is shown. I've tried everything I could find on Google, making sure the keyboard disable scroll is set to false. However, I still can't figure out what's causing the sc ...

javascripthtmlcsstypescriptionic2

Tips for controlling the placement of divs on a webpage

I need to align 3 divs in a specific way on my webpage. One should be on the left side taking up 25% of the window, one on the right side also taking up 25%, and the last one in the center taking up the remaining space. I'm struggling with how to achi ...

csshtml

Pictures without a set width

Hey there! I'm working on a responsive website and facing an issue with image resizing. When I shrink the screen size, the images also shrink along with it. How can I set a fixed width for the images? I tried switching from rem to px but that didn&apo ...

htmlcss

jQuery: Automatically scroll to the end of the div based on the height of the content within

I have successfully developed a chat feature that is functioning perfectly. However, I am encountering an issue with making my div scroll to the bottom. The height of the div is calculated as calc(100% - 60px);. This particular div retrieves messages from ...

htmljquerycss

Streamlining all icons to a single downward rotation

I am currently managing a large table of "auditpoints", some of which are designated as "automated". When an auditpoint is automated, it is marked with a gear icon in the row. However, each row also receives two other icons: a pencil and a toggle button. W ...

javascriptjquerycsstypescript

Can the color of text be adjusted (to either white or black) based on the background color (in any color and format)?

To achieve a text color that contrasts well with any background, I need to make sure it's either black or white. The background in my app can vary in color and format, so finding the perfect solution has been challenging. Using mix-blend-mode doesn&a ...

javascriptcssangularlessbackground-color

multiple elements sharing identical CSS styling

For each component, I made separate CSS files and imported them accordingly. However, despite the individual styling efforts, all components seem to have the same appearance. I specifically worked on styling an image differently for two components, but w ...

javascripthtmlcssreactjsstyles

When scrolling, the body content covers up the navbar

Whenever I try to scroll the page, the body contents start overlapping with the navbar. I have content over the navbar that should disappear when scrolling, and it is working correctly. The navbar should be fixed while scrolling, and this functionality ...

htmlcsstwitter-bootstraptwitter-bootstrap-3navbar

Is there a way to prevent the context menu from appearing when tapping on an image on a mobile phone?

When attempting to move an image on the screen with a touch event, a popup appears in Chrome when pressing and holding the image. This popup usually includes options to save the image. Is there a way to disable this popup so I can freely move the image w ...

javascripthtmlcss

CSS animation keyframes failing to initialize

How can I fix my CSS @keyframe animation that is not starting as expected? http://jsfiddle.net/sadmicrowave/VKzXp/ @-webkit-keyframes slideNotificationsHide { 0%{ width:70%; } 100%{ width:94%; left:0; right:0; } } #left-container{ position:abosl ...

cssanimationcss-animations

What could be the reason for the child element not occupying the full height of its parent container?

* { padding: 0; margin: 0; box-sizing: border-box; } body { margin: 50px; } .navbar { display: flex; align-items: center; justify-content: center; color: darkgreen; font-family: 'Vollkorn', serif; font-size: 1.2rem; font-w ...

javascripthtmlcss

Transforming CSS styles into Material UI's makeStyles

My CSS styling was originally like this const Root = styled.div` display: flex; flex-direction: row; margin: 0 auto; width: 100%; position: relative; @media (min-width: ${(p) => p.theme.screen.md}) { width: ${(p) => p.theme.screen.md ...

cssreactjsmaterial-ui

Attempting to increase the size of the menu text upon hover action

It seems like a basic mistake on my part, but I just can't seem to make it work. What I'm trying to achieve is that when you hover over a specific item in the menu, the text within that item should increase in size. However, currently it only en ...

htmlcss

Semi-transparent image

Can I achieve a semi-transparent image? Similar to this gradient: background:linear-gradient(to bottom,rgb(44, 44, 44),rgb(29, 38, 51,0.322)); ...

htmlcss

Having Multiple File Inputs [type=file] in one webpage

Is it possible to have two separate inputs for uploading images, each setting a different background image in a div? The second file input is: <input type='file' id='getval' name="logo" /> I want this file to be set as the back ...

javascripthtmlcss

Troublesome Issue with ngAnimate and ngHide: Missing 'ng-hide-animate' Hook Class

I am working on a case where I need to add animation to a DOM object using the ngHide directive: Check out this example here Within this scenario, I have an array of JSON objects: $scope.items = [ {"key": 1, "values": []}, {"key": 2, "values": [ ...

javascriptcssangularjsng-animate

Exploring Scroll Functionality for Inner Components Within Mat-tab

I am currently working on a small attendance project that involves using table components within mat-tab elements. However, I am facing an issue where the overflow from the table causes the entire component to scroll, when in fact I only want the table its ...

htmlcssangularscrollangular-material