CODEWITHSUNDEEP
htmlcsscss-animations
rayncorg
rayncorg

Reputation: 993

CSS height animation on hover image/icon

I have a problem with my icon when on hover. I want to replace my img src during on hover: heres my code so far:

#aks {
  width: 0px;
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  background: url("https://img.icons8.com/windows/32/000000/like.png") no-repeat;
  padding: 50px;
}

#aks:hover {
  background: url("https://img.icons8.com/officexs/32/000000/like.png")
    no-repeat;
  max-height: 500px;
  transition: max-height 0.25s ease-in;
}
<img id="aks" src="https://img.icons8.com/windows/32/000000/like.png" />

What I really want to achieve is when hovered on outline heart icon will replace with heart filled icon but during replacing the outline icon it will show/animate from bottom height 0 to full height so it look like it filled the outline icon. here some example: codepen

any alternatives or solutions other than this is highly appreciated. thanks in advance!

Upvotes: 1

Views: 1079

Answers (3)

Temani Afif
Temani Afif

Reputation: 273513

You can do it with background animation like below:

.heart {
  width: 50px;
  height:50px;
  padding-top:50px;
  background: 
    url("https://img.icons8.com/officexs/32/000000/like.png") bottom padding-box content-box,
    linear-gradient(#fff,#fff) bottom padding-box content-box,
    url("https://img.icons8.com/windows/32/000000/like.png");
  background-size:100% 100%;
  background-repeat:no-repeat;
  box-sizing:border-box;
  transition:0.5s;
}

.heart:hover {
   padding-top:0;
}
<div class="heart"></div>

Upvotes: 1

Devin Burke
Devin Burke

Reputation: 13820

This isn't particularly easy on a CSS-only heart because the sliding animation would have to be applied to three completely distinct elements (the rotated square, plus the two circles).

For the sake of thoroughness, here is an example using a font that includes a heart. For simplicity, I used Webdings but you should use Font Awesome in actual live code.

The summary is your background is a 2x taller gradient that is 50% white and 50% red, and you slide the background from showing the white half to instead showing the red half upon hover. Two important properties of this will currently only work on webkit browsers: text-stroke, which adds the outline to the text -- and background-clip, which clips the non-text portion of the span's background.

span {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, white 50%, red 50%);
  color: transparent;
  font-family: webdings;
  font-size: 200px;
  transition: background-position 2s;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: red;
  text-stroke-width: 5px;
  text-stroke-color: red;
}
span:hover {
    background-position: 0 100%;
}
<span>Y</span>

Upvotes: 1

Manjuboyz
Manjuboyz

Reputation: 7056

Well if using css is an option for you then, you can take a look at this:

.heart {
  background-color: red;
  height: 30px;
  width: 30px;
  transform: rotate(-45deg);
  transition: background-color 1s;
}

.heart::before,
.heart::after {
  content: '';
  background-color: red;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  position: absolute;
  transition: background-color 1s;
}

.heart::before {
  top: -15px;
}

.heart::after {
  left: 15px;
}

.heart:hover,
.heart:hover::before,
.heart:hover::after {
  background-color: #F5A9AE;
}

body {
  display: flex;
  height: 100vh;
}

.heart {
  margin: auto;
}
<div class="heart"></div>

Upvotes: 1

Related Questions