CODEWITHSUNDEEP
css
Renaud is Not Bill Gates
Renaud is Not Bill Gates

Reputation: 2084

transition background of pseudo element

I have a pseudo element which has a border radius of 50% and a background color when I hover on it, so a circle will be displayed when I do the hover.

I want to add a transition so the circle looks like it grows when I hover (like when you hover the star icon on gmail), but I can't figure out how to do it.

This is what I tried :

.container {
  position        : relative;
  height          : 100px;
  width           : 300px;
  padding         : 24px;
  background      : #fff;
  display         : flex;
  flex-direction  : column;
  justify-content : space-between;
  box-sizing      : border-box;
  color           : black;
  list-style      : none;
  border          : 2px solid black;
  }
input[type="checkbox"] {
  height     : 40px;
  width      : 40px;
  position   : absolute;
  top        : 12px;
  right      : 12px;
  margin     : auto;
  appearance : none;
  outline    : none;
  cursor     : pointer;
  opacity    : 1;
  border     : none;
  }
input[type="checkbox"]::after {
  content                    : url("https://svgshare.com/i/Qo7.svg");
  position                   : absolute;
  top                        : 0;
  left                       : 0;
  border-radius              : 50%;
  margin                     : auto;
  width                      : 100%;
  height                     : 100%;
  pointer-events             : none;
  display                    : flex;
  justify-content            : center;
  align-items                : center;
  z-index                    : 2;
  transition-duration        : 1s;
  transition-timing-function : cubic-bezier(0.4, 0, 0.2, 1);
  transition-property        : background;
  background-size            : 40%;
  background-position        : center;
  }
input[type="checkbox"]:checked:after {
  content             : url("https://svgshare.com/i/Qmp.svg");
  } 
input[type="checkbox"]:hover:after {
  background      : linear-gradient(to bottom, #D9DEEA 0%, #D9DEEA 100%) no-repeat;
  background-size : 100%;
  }
<div class="container">
  <input type="checkbox" />
</div>

And I have another issue is that the star is not properly centered inside the cicrle.

How can I fix this ?

Upvotes: 0

Views: 122

Answers (1)

Temani Afif
Temani Afif

Reputation: 274272

You can optimize your code and do everything using background. Your SVG was not perfectly centered because the SVG itself has the start that is not in the center.

svg {
  border:1px solid;
}
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19"><path d="M9.333 13.2c.134 0 .267 0 .4.133l3.734 2.8L12 11.467c-.133-.267 0-.534.267-.667L16 7.867h-4.667c-.266 0-.533-.134-.666-.534l-1.334-4.4-1.466 4.534c0 .266-.267.4-.534.4H2.667L6.4 10.8c.267.133.4.4.267.667L5.2 16.133l3.733-2.8c.134-.133.267-.133.4-.133m5.334 5.467c-.134 0-.267 0-.4-.134l-4.934-3.866L4.4 18.4a.85.85 0 01-.8 0c-.267-.133-.4-.533-.267-.8L5.2 11.467.267 7.733C0 7.6 0 7.333 0 7.067c.133-.267.4-.4.667-.4H6.8L8.667.533C8.8 0 9.733 0 10 .533l1.867 6.134H18c.267 0 .533.133.667.4.133.266 0 .533-.267.8l-4.933 3.866 1.866 6.134c.134.266 0 .533-.266.8-.134-.134-.267 0-.4 0" fill="#2D75FF" fill-rule="evenodd"/></svg>

Either change the SVG or consider some offset to rectify the position:

.container {
  position: relative;
  height: 100px;
  width: 300px;
  padding: 24px;
  box-sizing: border-box;
  color: black;
  border: 2px solid black;
}

input[type="checkbox"] {
  height: 40px;
  width: 40px;
  position: absolute;
  top: 12px;
  right: 12px;
  appearance: none;
  outline: none;
  cursor: pointer;
  border: none;
  background:
    var(--img,url("https://svgshare.com/i/Qo7.svg")) calc(50% + 1px) 50% /60% 60%,
    radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ var(--s,0px 0px);
  background-repeat:no-repeat;
  transition:0.5s;
}
input[type="checkbox"]:hover {
    --s:100% 100%;
}

input[type="checkbox"]:checked {
  --img: url("https://svgshare.com/i/Qmp.svg");
}
<div class="container">
  <input type="checkbox" >

</div>

Upvotes: 1

Related Questions